异常教程

jQuery text() 方法（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，动态操作DOM元素的内容是常见的需求。无论是更新页面文字、显示用户输入，还是实时反馈数据变化，都需要精准控制文本内容的读取与修改。jQuery text() 方法作为简化DOM操作的利器，为开发者提供了便捷的文本处理能力。本文将从基础用法到高级技巧，结合实际案例，深入解析这一方法的核心功能与应用场景，帮助读者快速掌握其使用逻辑。

一、jQuery text() 方法的基础用法

1.1 方法定义与核心作用

jQuery text() 方法用于获取或设置匹配元素的文本内容。它的核心特性是忽略元素内的HTML标签，仅保留纯文本信息。例如，若元素中包含<strong>加粗文字</strong>，调用text()时会直接返回“加粗文字”，而非保留标签。

基础语法

  • 获取文本内容： 
    var content = $("selector").text();
  • 设置文本内容： 
    $("selector").text("新文本内容");

示例1：获取段落文本

<p id="intro">欢迎来到jQuery学习之旅！</p>  
<script>  
  $(document).ready(function() {  
    var introText = $("#intro").text();  
    console.log(introText); // 输出："欢迎来到jQuery学习之旅！"  
  });  
</script>

1.2 与HTML标签的“隔离”特性

text()方法会自动去除HTML标签，这与html()方法形成鲜明对比。例如，若元素中包含<a href="#">链接文本</a>，调用text()时会直接提取“链接文本”，而不会保留超链接属性。

示例2：对比text()与html()的差异

<div id="content">  
  <span>原始文本</span>  
  <a href="#">带链接的文本</a>  
</div>  

<script>  
  // 使用text()获取文本  
  console.log($("#content").text()); // 输出："原始文本带链接的文本"  

  // 使用html()获取内容（保留标签）  
  console.log($("#content").html()); // 输出原始HTML结构  
</script>

比喻说明：
可以将text()想象为“文本过滤器”，它像一张筛网，只让纯文本通过，而将HTML标签筛除。这种特性在需要安全处理用户输入（如防止XSS攻击）时尤为重要。

二、动态文本操作的典型场景

2.1 实时更新文本内容

在交互式网页中，text()方法常用于动态更新文本信息，例如计数器、进度提示或用户输入反馈。

案例1：点击按钮更新文本

<button id="update-btn">更新文本</button>  
<div id="display">初始文本</div>  

<script>  
  $("#update-btn").click(function() {  
    $("#display").text("文本已更新！");  
  });  
</script>

2.2 结合变量与条件逻辑

通过结合JavaScript变量或条件判断，text()方法能实现更复杂的文本控制。

案例2：根据条件显示不同文本

<input type="text" id="userInput">  
<button id="showText">显示文本</button>  
<div id="result"></div>  

<script>  
  $("#showText").click(function() {  
    var inputVal = $("#userInput").val().trim();  
    if (inputVal === "") {  
      $("#result").text("请输入内容！");  
    } else {  
      $("#result").text("您输入的内容是：" + inputVal);  
    }  
  });  
</script>

2.3 多元素操作与遍历

当需要操作多个元素时，text()方法会自动作用于所有匹配项，并返回第一个元素的文本（若用于获取）。若需批量设置文本，可直接传递字符串。

示例3：批量设置列表项文本

<ul id="item-list">  
  <li>苹果</li>  
  <li>香蕉</li>  
  <li>橙子</li>  
</ul>  

<script>  
  // 将所有列表项的文本改为“已选”  
  $("#item-list li").text("已选");  
</script>

三、深入理解text()方法的细节与技巧

3.1 自动转义特殊字符

当通过text()方法设置内容时，所有HTML特殊字符（如<, >, &）会被自动转义，确保文本安全。例如，若输入<script>alert('恶意代码')</script>，实际显示为纯文本，而非执行代码。

示例4：特殊字符的转义效果

<div id="test"></div>  

<script>  
  $("#test").text("<p>这是一段文本</p>");  
  // 输出结果：&lt;p&gt;这是一段文本&lt;/p&gt;  
</script>

3.2 获取多元素的合并文本

当选择器匹配多个元素时，调用text()会将所有元素的文本内容合并为一个字符串，用空格分隔。

示例5：合并多个段落的文本

<p>第一段</p>  
<p>第二段</p>  
<p>第三段</p>  

<script>  
  console.log($("p").text()); // 输出："第一段 第二段 第三段"  
</script>

3.3 性能优化建议

  • 避免频繁操作DOM：若需多次修改同一元素的文本，建议先存储变量再更新，例如： 
    var $element = $("#target");  
$element.text($element.text() + " 新内容");
  • 批量操作优于循环：直接对集合元素调用text()，而非逐个遍历修改。

四、常见问题与解决方案

4.1 为什么text()返回的文本有额外空格？

由于浏览器会将元素内的空格、换行符视为文本内容的一部分，text()方法会保留这些空格。若需去除多余空格，可用JavaScript的trim()方法：

var cleanedText = $("#element").text().trim();

4.2 如何同时获取文本与保留HTML标签？

若需同时获取文本和HTML内容，可结合text()和html()方法：

var pureText = $("#content").text(); // 纯文本  
var htmlContent = $("#content").html(); // 包含标签

4.3 text()方法与表单元素的交互

对于表单元素（如<input>或<textarea>），text()方法无法获取其值，需改用val()方法：

// 错误用法：  
var inputText = $("#myInput").text(); // 返回空字符串  

// 正确用法：  
var inputText = $("#myInput").val();

五、实战案例：构建动态文本统计工具

5.1 案例目标

创建一个实时统计用户输入字数的文本框，使用text()方法显示字数信息。

实现代码

<textarea id="userInput" placeholder="输入内容..." rows="4"></textarea>  
<div id="counter"></div>  

<script>  
  $("#userInput").on("input", function() {  
    var text = $(this).val().trim();  
    var count = text.length;  
    $("#counter").text("当前字数：" + count);  
  });  
</script>

运行效果

  • 用户输入内容时，下方的<div>会实时显示字数。
  • 通过text()方法动态更新文本，实现交互反馈。

结论

jQuery text() 方法凭借其简洁的语法和强大的文本处理能力，成为开发者处理DOM文本内容的首选工具。无论是基础的文本读写、动态交互更新，还是安全防护与性能优化，这一方法都能提供高效解决方案。

通过本文的案例与技巧，读者应能掌握：

  1. 如何用text()方法精准操作文本内容；
  2. 与html()方法的核心区别及适用场景；
  3. 在实际项目中避免常见错误的最佳实践。

建议读者通过实际编码练习，逐步将这些知识应用到自己的项目中，进一步巩固对jQuery text() 方法的理解与使用能力。

最新发布

查看更多文章