Question

我有javascript变量和html字符串数据，如格式

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>';

我试图根据break语句进行计数，但它不起作用。

我想计算此html字符串中为浏览器视图找到的行数。有人请帮忙怎么做这个过程？

Answer 1

如果正确解释Question，请尝试从html_string创建jQuery对象，使用.filter()选择p元素，返回jQuery对象的.length属性，数量为{{1}原始字符串中的元素

＆＃13;

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

＆＃13;

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)

＆＃13;

Answer 2

根据您的后续评论，您可以使用DOMParser解析内容，然后了解段落数量：

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

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

演示 - ＆gt;的 http://jsfiddle.net/nfwy006u/1/

Answer 3

找到文本在MDN dimensions of element中显示的元素的高度，然后除以字体高度。

Answer 4

我认为如果你的变量中的html会发生变化，很难得到多少行，因为有些标签是内联的，有些标签是阻塞的。块元素也会开始一个新行（或者可以是内联css，将内联元素设置为块），而不仅仅是<br>标记。

所以我假设你得到了div的高度。这是一个想法：您可以在显示无显示的页面上插入html，并使用以下代码获取其高度：

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

Answer 5

你可以获得div的高度

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

然后将它分配到一行的高度，它将按行数

例如：

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

如何计算javascript html字符串变量中的行数

5 个答案: