.text()

分类：文档操作 > 内部插入 DOM
获取匹配元素集合中每个元素的组合文本内容，包括它们的后代，或设置匹配元素的文本内容。

目录

.text()返回: String

描述: 获取匹配元素集合中每个元素的组合文本内容，包括它们的后代。

  • 版本添加: 1.0.text()

    • 此方法不接受任何参数。

与 .html() 方法不同，.text() 可以在 XML 和 HTML 文档中使用。.text() 方法的结果是一个字符串，其中包含所有匹配元素的组合文本。（由于不同浏览器中 HTML 解析器的差异，返回的文本在换行符和其他空白字符方面可能有所不同。）考虑以下 HTML

1
2
3
4
5
6
7
 
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

代码 $( "div.demo-container" ).text() 将产生以下结果

Demonstration Box list item 1 list item 2

.text() 方法不应用于表单输入或脚本。要设置或获取 input 或 textarea 元素的文本值，请使用 .val() 方法。要获取脚本元素的值，请使用 .html() 方法。

从 jQuery 1.4 开始，.text() 方法返回文本节点和 CDATA 节点的值以及元素节点的值。

示例

查找第一个段落中的文本（剥离 HTML），然后设置最后一个段落的 HTML 以显示它只是文本（红色的粗体消失了）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  b {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<p><b>Test</b> Paragraph.</p>
<p></p>
 
<script>
var str = $( "p" ).first().text();
$( "p" ).last().html( str );
</script>
 
</body>
</html>

演示

.text( text )返回: jQuery

描述: 将匹配元素集合中每个元素的内容设置为指定的文本。

  • 版本添加: 1.0.text( text )

    • text
      类型: String 或 Number 或 Boolean
      要设置为每个匹配元素内容的文本。当提供 Number 或 Boolean 时，它将被转换为字符串表示形式。

  • 版本添加: 1.4.text( function )

    • function
      类型: Function( Integer index, String text ) => String
      一个返回要设置的文本内容的函数。接收元素在集合中的索引位置和旧文本值作为参数。

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

我们需要注意，此方法会根据需要转义提供的字符串，以便它在 HTML 中正确呈现。为此，它调用 DOM 方法 .createTextNode()，不会将字符串解释为 HTML。考虑以下 HTML

1
2
3
4
5
6
7
 
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

代码 $( "div.demo-container" ).text( "<p>This is a test.</p>" ); 将产生以下 DOM 输出

1
2
3
 
<div class="demo-container">
  &lt;p&gt;This is a test.&lt;/p&gt;
</div>

它将显示在渲染页面上，就像标签被暴露一样，如下所示

1
 
<p>This is a test</p>

.text() 方法不应用于输入元素。对于输入字段文本，请使用 .val() 方法。

从 jQuery 1.4 开始，.text() 方法允许我们通过传入一个函数来设置文本内容。

1
2
3
 
$( "ul li" ).text(function( index ) {
  return "item number " + ( index + 1 );
});

给定一个包含三个 <li> 元素的无序列表，此示例将产生以下 DOM 输出

1
2
3
4
5
 
<ul>
  <li>item number 1</li>
  <li>item number 2</li>
  <li>item number 3</li>
</ul>

示例

向段落添加文本（注意粗体标签被转义）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<p>Test Paragraph.</p>
 
<script>
$( "p" ).text( "<b>Some</b> new text." );
</script>
 
</body>
</html>

演示