jQuery text() 方法-代码号

在jQuery里，text() 方法承担着一个看似简单、实则很关键的角色：专门处理元素的纯文本内容。它既能读取，也能写入，并且在整个过程中会彻底剥离HTML标签。

很多开发者初学时，容易把它和 html() 方法搞混。这并不奇怪，因为两者都能操作元素里的内容。但它们在底层行为上有本质区别，理解这个区别，能避免不少隐蔽的坑。

text() 方法的核心就一句话：只关心文字，不关心标签。

当你用它来获取内容时，它会把你选中的所有元素里的文本内容合并在一起返回，任何HTML标记都会被过滤掉。比如元素内部有 、 这类标签，返回结果里不会包含它们，只有纯文本。

当你用它来设置内容时，它会用你提供的新文本覆盖掉元素原有的所有内容。注意，如果你传入的字符串里包含了HTML标签，比如 "重要通知"，它不会被解析渲染，而是会原封不动地把尖括号、字母这些字符直接显示成文本。

这和 html() 方法形成了鲜明对比。我刚开始接触项目时，就曾在用户评论区直接用 html() 插入内容，本想做高亮，结果引发了XSS漏洞。后来才彻底明白，它们的使用边界很清晰：

还有一个不易被注意的知识点：text() 方法可以在XML文档中使用，而 html() 方法专用于HTML文档。当你在处理SVG或其它非标准HTML的内嵌XML数据时，就只能选择 text()。

获取文本内容

$(选择器).text()

这个形式不需要任何参数，直接返回匹配元素中所有元素的纯文本组合。

设置文本内容

$(选择器).text(内容)

内容 参数是你想要设置的新文本字符串。在执行时，其中的HTML特殊字符会被自动编码。

使用函数设置文本

$(选择器).text(function(索引, 当前内容){
  return 新文本;
})

这种形式灵活得多。函数接收两个参数：index 是当前元素在选中中的索引位置，从0开始；currentContent 是当前元素原有的文本内容。我在做列表项序号重排时经常用它，它允许你基于元素的位置或原始内容动态生成新文本。

来看一个读取并转移纯文本的简单例子。假设页面结构如下：

<p><strong>程序员修炼之道：</strong>持续交付与重构</p>
<p id="target"></p>

我们想把第一个段落里的纯文本提取出来，放到第二个段落里，但不想保留加粗效果：

var plainStr = $("p:first").text();
$("#target").text(plainStr);

最终，两个段落展示的视觉结果都是“程序员修炼之道：持续交付与重构”，但 #target 内部不会有  标签，完全是纯文本。

再看一个利用函数设置内容的实用例子。假设我们有一个待办事项列表：

<ul>
  <li>重构用户模块</li>
  <li>编写单元测试</li>
  <li>审查代码</li>
</ul>

现在，我们想给每个待办事项前按顺序加上序号：

$("ul li").text(function(i, oldText) {
  return (i + 1) + ". " + oldText;
});

最终列表会显示为“1. 重构用户模块”、“2. 编写单元测试”……这种方式充分利用了函数的 index 参数，比手动逐个修改要优雅得多。

处理用户输入或任何不可信数据并插入DOM时，优先使用 text() 方法来避免跨站脚本攻击。这是我给自己定的一个硬性规则。
当你需要保留或插入富文本格式，比如后台编辑器生成的内容，才使用 html()。但要确保内容来源是可信的。
在需要批量更新一组相似元素，且新内容依赖于旧内容或其位置时，使用带有回调函数的 text(function) 写法是效率很高的选择。
调试时，如果遇到内容出不来的情况，先检查一下选择器是否正确，再用控制台执行 $(选择器).length 看看是否真的拿到了元素。这个小习惯能省下不少排查时间。

理解了 text() 和 html() 的实质区别后，在处理DOM内容的场景里，你就能做出更稳妥、更安全的选择了。

本文标签：

jQuery text() 方法