首页
/ 正文

jQuery :contains() 选择器（千字长文）

更新时间: 2025-04-07 01:44:00

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习，欢迎点击围观

前言

在网页开发中，筛选和操作特定文本内容的 HTML 元素是一个常见需求。例如，我们需要根据用户输入动态高亮显示包含关键词的段落，或者根据特定文本条件隐藏部分内容。此时，jQuery :contains() 选择器便成为开发者手中一把精准的“文本检索钥匙”。它通过简单的语法和强大的功能，帮助开发者快速定位并操作包含指定文本的元素。

本文将从基础概念讲起，逐步深入其用法、技巧、性能优化及常见问题，适合编程初学者和中级开发者阅读。通过代码示例和实际场景的结合，读者可以快速掌握这一工具，并将其灵活运用于项目开发中。

一、什么是 jQuery :contains() 选择器？

1.1 核心功能与作用

:contains() 选择器是 jQuery 提供的一种基于文本内容筛选元素的方法。它的作用是查找所有包含指定文本的元素，并返回这些元素的集合。例如，若要选择页面中所有包含“JavaScript”文本的 <div> 元素，可以这样写：

$("div:contains('JavaScript')");

1.2 形象比喻：文本检索的“过滤器”

想象你在一个图书馆中，需要快速找到所有包含“编程”关键词的书籍。你可以通过扫描书名或摘要来筛选，而无需逐一翻阅每本书。:contains() 选择器就像这个过程的自动化工具：它在页面中“扫描”所有元素的文本内容，并返回符合条件的“书籍”（即 HTML 元素）。

1.3 关键点总结

文本匹配：仅根据元素的文本内容（不包括 HTML 标签）进行匹配。
大小写敏感：默认不区分大小写（如“Hello”和“HELLO”会被视为匹配）。
模糊匹配：即使文本是部分匹配，也会被选中。例如，contains("apple") 会匹配“apple pie”或“APPLE”。

二、基础用法：从简单示例入门

2.1 基础语法与代码示例

语法格式：

$( "selector:contains(text)" )

其中：

selector：需要筛选的 HTML 元素选择器（如 div、p 或 #id）。
text：要匹配的文本内容，需用单引号或双引号包裹。

示例 1：高亮显示包含特定文本的段落

<p>今天学习了 jQuery 的基础语法。</p>  
<p>明天计划深入学习 :contains() 选择器的用法。</p>  

<script>  
  $(document).ready(function() {  
    $("p:contains('jQuery')").css("background-color", "yellow");  
  });  
</script>

执行结果：第一个段落会被黄色背景高亮，因为其中包含“jQuery”关键词。

2.2 匹配规则详解

文本内容包含即可：即使文本是嵌套元素的子元素，只要父元素包含该文本，就会被选中。
```
<div>  
  <span>这是一个测试文本</span>  
</div>  
```
使用 $("div:contains('测试文本')") 可以选中该 <div>。
空格与特殊字符：支持匹配包含空格或特殊符号的文本，例如 :contains("Hello World!")。

三、进阶技巧：扩展功能与组合使用

3.1 结合其他选择器

通过与其他 jQuery 选择器组合，可以实现更复杂的筛选逻辑。例如，仅选择直接子元素或排除特定元素：

示例 2：选择直接子元素中的匹配项

// 选择直接子元素 <p>中包含"高级"的元素  
$("div > p:contains('高级')").addClass("highlight");

示例 3：排除特定元素的匹配项

// 选择所有包含"错误"的 <div>，但排除 class="ignored" 的元素  
$("div:contains('错误'):not('.ignored')").css("color", "red");

3.2 动态文本匹配与事件绑定

在用户交互场景中，可以动态获取输入值并实时筛选元素。例如，搜索框过滤列表项：

示例 4：实时搜索功能

<input type="text" id="searchInput">  
<ul>  
  <li>JavaScript 基础</li>  
  <li>jQuery 教程</li>  
  <li>CSS 动画</li>  
</ul>  

<script>  
  $("#searchInput").on("input", function() {  
    const keyword = $(this).val().trim();  
    $("li").show(); // 先显示所有项  
    if (keyword) {  
      $("li:not(:contains('" + keyword + "'))").hide(); // 隐藏不匹配项  
    }  
  });  
</script>

当用户输入“J”，包含“JavaScript”和“jQuery”的列表项会被保留，其他项隐藏。

四、性能优化与注意事项

4.1 性能问题与解决方案

问题背景：:contains() 的内部实现是逐个遍历元素并检查文本内容，当页面元素数量庞大时，可能导致性能下降。

优化方法：

缩小选择器范围：优先指定父级元素或更具体的选择器。例如，使用 $("#content p:contains(...)") 而非全局搜索 $("p:contains(...)")。
结合 filter() 方法：对于更复杂的条件，可使用 filter() 替代，例如：
```
$("div").filter(function() {  
  return $(this).text().includes("目标文本");  
}).css("border", "2px solid red");  
```
这种方式在处理大量元素时可能更高效。

4.2 常见误区与解决方案

误区 1：匹配 HTML 标签内的文本

如果元素中包含 HTML 标签，:contains() 会忽略标签，仅匹配纯文本。例如：

<div>  
  <strong>重点内容：</strong> 这里需要高亮  
</div>

使用 $("div:contains('重点内容')") 仍然会匹配该元素，因为文本内容是完整的。

误区 2：大小写敏感问题

默认情况下，:contains() 不区分大小写。如果需要严格匹配大小写，可通过 JavaScript 的字符串方法处理：

// 严格匹配"HELLO"（全大写）  
$("p").filter(function() {  
  return $(this).text() === "HELLO";  
}).css("color", "blue");

五、实际应用场景与案例分析

5.1 案例 1：动态生成的 FAQ 列表过滤

假设有一个 FAQ 页面，用户需要根据关键词过滤问题：

HTML 结构：

<input type="text" id="faqFilter">  
<div class="faq-container">  
  <div class="faq-item">  
    <h3>如何安装 jQuery？</h3>  
    <p>通过 CDN 引入即可...</p>  
  </div>  
  <div class="faq-item">  
    <h3>:contains() 选择器的性能如何？</h3>  
    <p>需结合 filter() 优化...</p>  
  </div>  
</div>

JavaScript 实现：

$("#faqFilter").on("input", function() {  
  const keyword = $(this).val().trim().toLowerCase();  
  $(".faq-item").each(function() {  
    const text = $(this).text().toLowerCase();  
    $(this).toggle(text.includes(keyword));  
  });  
});

通过输入“性能”关键词，只有第二个 FAQ 项会显示。

5.2 案例 2：错误信息的高亮与提示

在表单验证中，动态显示包含错误信息的字段：

HTML 结构：

<form>  
  <div class="form-group">  
    <label>用户名</label>  
    <input type="text" name="username">  
    <div class="error">用户名不能为空</div>  
  </div>  
  <!-- 其他表单字段 -->  
</form>

JavaScript 逻辑：

$(document).ready(function() {  
  // 隐藏所有初始的错误提示  
  $(".error").hide();  

  $("form").on("submit", function(e) {  
    e.preventDefault();  
    // 模拟验证逻辑  
    $(".form-group:contains('不能为空')").find(".error").show();  
  });  
});

当提交表单时，所有包含“不能为空”文本的表单组会显示错误提示。

六、常见问题与解答

6.1 问：如何匹配包含 HTML 标签的文本？

答：:contains() 仅匹配元素的纯文本内容，忽略 HTML 标签。若需匹配标签内的文本，可使用 filter() 方法结合 html() 属性：

$("div").filter(function() {  
  return $(this).html().includes("<strong>重点</strong>");  
}).addClass("highlight");

6.2 问：能否匹配部分文本或正则表达式？

答：:contains() 本身不支持正则表达式，但可通过 filter() 结合 JavaScript 的 match() 方法实现：

$("p").filter(function() {  
  return $(this).text().match(/^[A-Z]/); // 匹配以大写字母开头的文本  
}).css("font-weight", "bold");

6.3 问：为什么有时匹配不到预期元素？

答：常见原因包括：

元素文本为空或包含不可见字符（如空格）。
使用了特殊字符未转义（如引号）。
元素内容动态加载，需等待 DOM 完全加载后再执行代码。

结论

通过本文的讲解，读者可以掌握 jQuery :contains() 选择器的核心功能、进阶技巧及最佳实践。这一工具不仅是文本筛选的“过滤器”，更是构建动态交互功能（如搜索、错误提示、内容过滤）的重要基础。

在实际开发中，建议结合具体场景选择合适的方法：对于简单需求，直接使用 :contains() 可快速实现；对于复杂或性能敏感的场景，则需通过 filter() 或其他优化手段提升效率。

掌握这一选择器后，开发者可以更高效地操作页面内容，为用户提供更流畅的交互体验。未来，随着对 jQuery 生态的深入学习，读者还可以探索更多高级选择器与插件，进一步提升开发效率。

jQuery :contains() 选择器（千字长文）

前言

一、什么是 jQuery :contains() 选择器？

1.1 核心功能与作用

1.2 形象比喻：文本检索的“过滤器”

1.3 关键点总结

二、基础用法：从简单示例入门

2.1 基础语法与代码示例

2.2 匹配规则详解

三、进阶技巧：扩展功能与组合使用

3.1 结合其他选择器

3.2 动态文本匹配与事件绑定

四、性能优化与注意事项

4.1 性能问题与解决方案

4.2 常见误区与解决方案

误区 1：匹配 HTML 标签内的文本

误区 2：大小写敏感问题

五、实际应用场景与案例分析

5.1 案例 1：动态生成的 FAQ 列表过滤

5.2 案例 2：错误信息的高亮与提示

六、常见问题与解答

6.1 问：如何匹配包含 HTML 标签的文本？

6.2 问：能否匹配部分文本或正则表达式？

6.3 问：为什么有时匹配不到预期元素？

结论

最新发布

RegExp + 量词（长文讲解）

RegExp * 量词（保姆级教程）

RegExp ? 量词（千字长文）

RegExp {X} 量词（长文讲解）

RegExp {X,Y} 量词（长文解析）

RegExp {X,} 量词（手把手讲解）

RegExp $ 量词（千字长文）

RegExp ^ 量词（超详细）

RegExp ?= 量词（建议收藏）

RegExp ?! 量词（保姆级教程）