jQuery text()方法

text() 方法是 jQuery 库中用于获取或设置匹配元素的文本内容的重要工具。与 html() 方法不同，text() 方法处理的是纯文本，不会解析 HTML 标签。这使得它在处理用户输入、显示非 HTML 格式的数据或避免 XSS 攻击时特别有用。

一、基本用法

1. 获取文本内容： 使用 .text() 方法（不带参数）可以获取匹配元素的文本内容。这包括元素内部的所有文本，但不包括其子元素的 HTML 标签。

   <div id="content">这是一个 <strong>示例</strong> div。</div>
   <button id="getTextButton">获取文本</button>
   
   <script>
       $(document).ready(function() {
           $("#getTextButton").click(function() {
               alert($("#content").text()); // 输出：这是一个 示例 div。
           });
       });
   </script>
   

2. 设置文本内容： 使用 .text(content) 方法可以设置匹配元素的文本内容。这里的 content 是一个字符串，表示要设置的新文本。

   <div id="content">这是一个 <strong>示例</strong> div。</div>
   <button id="setTextButton">设置文本</button>
   
   <script>
       $(document).ready(function() {
           $("#setTextButton").click(function() {
               $("#content").text("新的文本内容");
               // 注意：这会替换掉 <div> 内的所有内容，包括 <strong> 标签和它的内容。
           });
       });
   </script>
   

二、高级用法

1. 使用函数作为参数： .text() 方法还可以接受一个函数作为参数，该函数会针对每个匹配元素执行，并返回要设置的文本内容。

   <div class="item">Item 1</div>
   <div class="item">Item 2</div>
   <div class="item">Item 3</div>
   <button id="updateItemsTextButton">更新文本</button>
   
   <script>
       $(document).ready(function() {
           $("#updateItemsTextButton").click(function() {
               $(".item").text(function(index, oldText) {
                   return oldText + " - Updated!";
               });
           });
       });
   </script>
   

2. 结合事件处理： text() 方法通常与事件处理函数结合使用，以响应用户的交互操作，如按钮点击。

   <div id="dynamicText">初始文本</div>
   <button id="changeTextButton">改变文本</button>
   
   <script>
       $(document).ready(function() {
           $("#changeTextButton").click(function() {
               $("#dynamicText").text("按钮被点击后更新的文本");
           });
       });
   </script>
   

3. 注意事项：

   • 当使用 .text() 方法设置内容时，它会自动处理特殊字符的转义，因此你不需要担心 XSS 攻击。
   • .text() 方法会替换目标元素内的所有现有文本内容。如果你只想添加或删除特定的文本片段，可能需要使用其他方法，如 .append(), .prepend(), 或字符串操作函数。

三、总结

text() 方法是 jQuery 中用于操作文本内容的一个简单而强大的工具。无论是读取现有文本还是动态更新页面，它都能提供直观且有效的解决方案。通过掌握 text() 方法的基本和高级用法，你可以更灵活地控制网页的文本内容，提升用户体验。

本文地址：https://www.tides.cn/p_jquery-text