1

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?

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
VijayRagavan
  • 380
  • 1
  • 5
  • 17

5 Answers5

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/

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
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>
guest271314
  • 1
  • 15
  • 104
  • 177
  • But what if a `p` tag's content is longer than 1 "line" and breaks into another line? – camelCase Nov 05 '15 at 15:33
  • @camelCase See comment at http://stackoverflow.com/questions/33548340/how-to-count-number-of-lines-in-javascript-html-string-variable/33548577#comment54876481_33548340 _"Line mean if that html string show in browser view it will display how many paragraphs."_ – guest271314 Nov 05 '15 at 15:35
  • Yeah, got that part. I guess I just got confused by the question! – camelCase Nov 05 '15 at 15:37
0

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

Blindman67
  • 51,134
  • 11
  • 73
  • 136
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()
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Dragonmon
  • 114
  • 6
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
kasynych
  • 71
  • 2