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?

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?

• javascript
• arrays
• parsing

• 4 Define what a "line" is. – ergonaut Commented Nov 5, 2015 at 15:21
• Line mean if that html string show in browser view it will display how many paragraphs. – VijayRagavan Commented Nov 5, 2015 at 15:26
• You might try this answer then – camelCase Commented Nov 5, 2015 at 15:27

5 Answers 5

Based on your follow-up ment 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/nfwy006u/1/

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

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

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()