jQuery:text()和html()有什么区别?


Answers:


347

我认为差异几乎是不言而喻的。测试非常简单。

jQuery.html()将字符串视为HTML,jQuery.text()将内容视为文本

<html>
<head>
  <title>Test Page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
      $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
    });
  </script>
</head>

<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

jQuery API文档中描述了可能不太明显的差异

.html()的文档中:

.html()方法在XML文档中不可用。

.text()的文档中:

.html()方法不同,.text()可以在XML和HTML文档中使用。

$(function() {
  $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
  $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
http://jsfiddle.net/hossain/sUTVg/上的实时演示


还要注意的是,两者的长度也不同。jsfiddle.net/sUTVg/458
GreeKatrina 2015年

5
@aequalsb我认识到这是一个老问题了,但是我必须指出,由于文本被视为HTML,因此默认情况下使用´.html()´是危险的。如果您从querystring参数,表单,标题,URL或其他您无法提供或编辑的其他地方获得该文本,那么您对XSS敞开了怀抱。
Canis

105

((如有必要,请更新,此答案是维基))

子的问题:当只有文字,什么是快,.text()还是.html()

答: .html()更快!有关所有问题,请参见此处的“行为测试工具包”

因此,总而言之,如果您只有“一个文本”,请使用html()方法。

注意:没有意义吗?请记住,该.html()函数只是的包装.innerHTML,但是.text()jQuery 在函数中添加了“实体过滤器”,该过滤器自然会浪费时间。


好吧,如果您真的想要性能 ... 使用纯Javascript访问该nodeValue属性的直接文本替换。基准结论:

  • jQuery的.html()速度比快2倍.text()
  • 纯JS' .innerHTML比快3倍.html()
  • 纯JS' .nodeValue比快约50倍,比.html()约100倍和约.text()20倍.innerHTML

PS:.textContent属性是在DOM-Level-3中引入的,.nodeValue是DOM-Level-2,并且速度更快(!)。

看到这个完整的基准

// Using jQuery:
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").html('BENCHMARK WORK');
var ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").text('BENCHMARK WORK');
alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration());

// Using pure JavaScript only:
simplecron.restart(); for (var i=1; i<3000; i++)
    document.getElementById('work').innerHTML = 'BENCHMARK WORK';
ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    document.getElementById('work').nodeValue = 'BENCHMARK WORK';
alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration());

7
但是,如果处理不受信任的输入,则应尽可能使用text()。
Scott Simontis 2015年

@ScottSimontis当设置nodeValue属性,它把“>”到“&LT;”等等
彼得克劳斯

当我使用Chrome DevTools(developer.chrome.com/devtools/docs/timeline)进行基准测试时,结果却相反(.text()似乎比快约7倍.html())。源代码:codepen.io/damhonglinh/pen/vGpQEO。我测试了1500个元素;.html()花费了约220 .text()毫秒,花费了约30毫秒。
Linh Dam

嗨@LinhDam。嗯...使用完整的基准测试,我的Firefox说“ JQ TIMES(3000x):html = 82 text = 254”,“ JS TIMES(3000x):html = 15 text = 4” ...而我的Chrome浏览器说“ JQ TIMES(3000x):html = 82 text = 202“,” JS TIMES(3000x):html = 16 text = 0“ ....因此(Firefox和Chrome)的时间比例相同。
彼得·克劳斯

成为text()和html()之间的真实基准,在任何情况下都应完成选择器或getElementById或$(“#work”),否则您还将基准$(“#work”)vs getElementById
Octavioamu

66

第一个示例实际上将HTML嵌入,div而第二个示例通过将与元素相关的字符替换为其相应的字符实体来转义文本,从而使其按字面显示(即,不显示 HTML )。


1
对不起,我不太了解。您能否进一步解释。谢谢
Brettk

您是什么意思,第二个示例将“编码”?已经在编码了,不是吗?
布雷特克,

@Brettk-我说了“编码”,但这只是手指的滑动。我更改了答案以更好地反映我的意思。
Andrew Hare

6
他的意思是在.text()函数中,所有都<将替换为&lt;。因此,.html()在浏览器中将看到链接和一些粗体文本,.text()在浏览器中将一切都显示为文本,而不是链接或粗体文本。
2009年

59

text()方法实体转义传递给它的任何HTML。text()当您要插入对查看页面的人可见的HTML代码时使用。

从技术上讲,您的第二个示例产生:

&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

在浏览器中显示为:

<a href="example.html">Link</a><b>hello</b>

您的第一个示例将呈现为实际链接和一些粗体文本。


4
这应该已经包含在所选答案中,以说明实际情况。
d512

27

实际上,两者看上去确实有些相似,但有很大不同,这取决于您的使用或意图要实现的目标,

使用地点:

  • 用于.html()对具有html元素的容器进行操作。
  • 用于.text()修改通常具有单独的开始和结束标签的元素的文本

不使用的地方:

  • .text() 方法不能在表单输入或脚本上使用。

    • .val() 用于输入或textarea元素。
    • .html() 用于脚本元素的值。
  • 从中获取html内容.text()会将html标签转换为html实体。

区别:

  • .text() 可以在XML和HTML文档中使用。
  • .html() 仅用于html文档。

在jsfiddle上检查此示例以了解操作上的差异


1
这个答案是最容易理解和格式最好的+1
凯蒂(Katie)

什么是diff bw :: html(data); &val(数据); @Owais Qureshi
宝石

9

奇怪的是,没有人提到的跨站点脚本预防的好处.text()超过.html()(虽然其他刚才提到,.text()逃脱的数据)。

始终建议.text()在要更新DOM中的数据(仅供用户查看的数据/文本)时使用。

.html() 应该主要用于获取div中的HTML内容。


5

当您打算将值显示为简单文本时,请使用.text(…)。

当您打算将值显示为html格式的文本(或HTML内容)时,请使用.html(…)。

如果不确定文本(例如,来自输入控件的文本)不包含在HTML中具有特殊含义的字符/标签,则绝对应使用.text(...)这真的很重要,因为这可能导致文本无法正确显示,但也可能导致激活不需要的JS脚本片段(例如,来自其他用户输入的片段)




2

简单来说。

html()-获取内部html(html标签和文本)。

text()-仅在内部出现时获取文本(仅文本)


1

区别在于将其.html()评估为html,将其评估为.text()文本。
考虑一块HTML
HTML

<div id="mydiv">
<div class="mydiv">
    This is a div container
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
    a text after ul
</div>
</div>

JS

var out1 = $('#mydiv').html();
var out2 = $('#mydiv').text();
console.log(out1) // This output all the html tag
console.log(out2) // This is output just the text 'This is a div container Link 1 Link 2 a text after ul'

插图是从此链接http://api.jquery.com/text/


1

.text()将为您提供HTML标记之间的实际文本。例如,段落文本在p标签之间。值得注意的是,它将为您提供与$选择器一起定位的元素中的所有文本以及该选定元素的子元素中的所有文本。因此,如果您p在body元素内有多个带有文本的标签,并且执行了$(body).text(),您将从所有段落中获取所有文本。(仅文本,而不是p标签本身。)

.html()将为您提供文字标签。因此,$(body).html()基本上可以为您提供整个页面的HTML页面

.val()适用于具有value属性的元素,例如input。一个input没有包含文本或HTML,因此.text().html()都将是nullinput元素。


0

我认为区别是在text()您插入html标记后html标记不起作用

$('#output').html('You are registered'+'<br>'  +'  '
                     + 'Mister'+'  ' + name+'   ' + sourname ); }

输出:

You are registered <br> Mister name sourname

替换text()html()

输出

You are registered
Mister name sourname 

然后标签<br>html()


1
请更正您的答案,第一个代码段应使用text()
MKaama

0

text函数将值设置或检索为纯文本,否则,HTML函数将值设置或检索为HTML标记以对其进行更改或修改。如果只想更改内容,请使用text()。但是,如果您需要更改标记,则必须使用hmtl()。

六年后,对我来说这是一个虚拟的答案,不要介意。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.