How to count number of lines in javascript html string variable

Question

I have javascript variable with html string data like below format

var html_string = '<p class="MsoListParagraph" style="margin-left:28.5pt;mso-add-space:auto;text-indent:-28.5pt;mso-list:l0 level2 lfo1;tab-stops:list 28.5pt"><!--[if !supportLists]--><b><span lang="EN-US">1.1<span style="font-weight: normal; font-stretch: normal; font-size: 7pt; line-height:normal; font-family: Times New Roman;"></span></span></b><!--[endif]--><b><span lang="EN-US">Purpose of the Document<o:p></o:p></span></b></p><p class="MsoNormal" style="margin-left:28.5pt;tab-stops:80.25pt"><span lang="EN-US">This document helps to understand the design aspects of the ASSMail web based project. This document details the technical specification for the project.</span></p>';

I tried to count based on the break statement but it not work.

I want to count number of lines found in this html string for browser view. Any one please help how to do this process?

Line mean if that html string show in browser view it will display how many paragraphs. — VijayRagavan
– VijayRagavan, Commented Nov 5, 2015 at 15:26

davidkonrad · Accepted Answer · 2015-11-05 15:32:24Z

4

Based on your follow-up comment you can parse the content with a DOMParser, and by that get to know the number of paragraphs :

var parser = new DOMParser(),
    doc = parser.parseFromString(html_string, "text/html"),
    paragraphs = doc.querySelectorAll('p').length;

alert('there is '+paragraphs+' paragraphs');

demo -> http://jsfiddle.net/nfwy006u/1/

answered Nov 5, 2015 at 15:32

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guest271314 · Accepted Answer · 2015-11-05 15:41:14Z

2

If interpret Question correctly , try creating jQuery object from html_string , using .filter() to select p elements , .length property of returned jQuery object for number of p elements in original string

$(html_string).filter("p").length

var html_string = '<p class="MsoListParagraph" style="margin-left:28.5pt;mso-add-space:auto;text-indent:-28.5pt;mso-list:l0 level2 lfo1;tab-stops:list 28.5pt"><!--[if !supportLists]--><b><span lang="EN-US">1.1<span style="font-weight: normal; font-stretch: normal; font-size: 7pt; line-height:normal; font-family: Times New Roman;"></span></span></b><!--[endif]--><b><span lang="EN-US">Purpose of the Document<o:p></o:p></span></b></p><p class="MsoNormal" style="margin-left:28.5pt;tab-stops:80.25pt"><span lang="EN-US">This document helps to understand the design aspects of the ASSMail web based project. This document details the technical specification for the project.</span></p>';

var html = $(html_string);

html.appendTo("body");

console.log(html.filter("p").length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

edited Nov 5, 2015 at 15:41

answered Nov 5, 2015 at 15:29

guest271314

1

3 Comments

camelCase Over a year ago

But what if a p tag's content is longer than 1 "line" and breaks into another line?

guest271314 Over a year ago

@camelCase See comment at stackoverflow.com/questions/33548340/… "Line mean if that html string show in browser view it will display how many paragraphs."

camelCase Over a year ago

Yeah, got that part. I guess I just got confused by the question!

Blindman67 · Accepted Answer · 2015-11-05 15:27:09Z

0

Find the height of the element the text is displayed in MDN dimensions of element then divide by the font height.

answered Nov 5, 2015 at 15:27

Blindman67

54.6k11 gold badges88 silver badges152 bronze badges

Comments

kasynych · Accepted Answer · 2015-11-05 16:03:07Z

0

You can get height of div

jQuery("#id-of-your-div").height()

And then devide it to the height of one line, and it will by number of lines

For example:

jQuery("#id-of-your-div").height()/20

answered Nov 5, 2015 at 16:03

kasynych

712 bronze badges

Comments

Mr Lister · Accepted Answer · 2015-11-17 09:47:34Z

0

I think it will be hard to get how many lines are there, if your html in the variable is going to change, as some tags are inline, some tags are block. Block elements also start a new line (or can be inline css that set an inline element to be block), not just <br> tag.

So I assume you are getting the height of the div. Here is an idea: You can insert your html on the page with display none, and get the height of it with some code like:

jQuery("#id-of-your-div").height()

edited Nov 17, 2015 at 9:47

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Nov 5, 2015 at 15:39

Dragonmon

1146 bronze badges

Collectives™ on Stack Overflow

How to count number of lines in javascript html string variable

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related