本文详解 jquery `:contains()` 选择器在实际使用中常被误用的问题，指出 `body:contains(...)` 恒为真导致逻辑失效的根本原因，并提供结构优化、选择器精炼与健壮性增强的完整解决方案。
jQuery 的 :contains(text) 是一个全字匹配但不区分边界的伪类选择器——它只要目标元素（或其任意后代）的文本内容中包含指定子字符串，即返回该元素。问题代码中使用 $('body:contains("[aaa]")') 失效的核心原因在于：<body> 标签本身可能隐含空白、换行、注释，甚至 jQuery 脚本标签内的字符都可能被 :contains() 视为“文本内容”，导致匹配恒成立（.length > 0 总为 true），从而使 show()/hide() 完全失去条件判断意义。
更关键的是，:contains() 不支持正则或转义特殊字符（如 [、]、(、)），直接传入 "[aaa]" 或 "(kk-aka)" 会导致语法错误或意外匹配。例如，[aaa] 中的方括号在 CSS 选择器中具有特殊含义，未经处理会破坏选择器结构。
✅ 正确做法是：
- 限定搜索范围：避免在 body 这样宽泛的根节点上使用 :contains()，改用语义化容器（如 <main>、<article> 或自定义 data-role="content" 区域）；
- 选用无歧义关键词：使用页面中明确、唯一、不含 CSS 特殊字符的纯文本关键词（如 "Date"、"Asia"），而非带格式符号的占位符；
- 增强鲁棒性：添加空格 trim 和大小写归一化可选处理，避免因前后空格或大小写差异导致漏匹配。
以下是修正后的完整示例：
立即学习“前端免费学习笔记（深入）”；
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- 使用 <main> 明确内容主体区域 --> <main id="content-area"> <h2 id="date" style="display:none;">Date: <span id="current-date"></span></h2> <h2 id="mn" style="display:none;">Upcoming Event: Asia Cup 2030</h2> <!-- 页面真实内容应放在此处，例如： --> <p>This page contains Date information and upcoming Asia-related events.</p> </main>
$(document).ready(function() {
const $content = $('#content-area'); // 精准定位内容容器
// ✅ 安全关键词：纯文本、无特殊符号、语义清晰
const dateKeyword = "Date";
if ($content.text().includes(dateKeyword)) {
$("#date").show();
$("#current-date").text(new Date().toDateString());
} else {
$("#date").hide();
}
const mnKeyword = "Asia";
if ($content.text().includes(mnKeyword)) {
$("#mn").show();
} else {
$("#mn").hide();
}
});? 进阶建议：
- 优先使用原生 textContent.includes() 替代 :contains()，性能更高且完全规避 CSS 选择器解析风险；
- 如需模糊匹配（如忽略大小写），可改用：$content.text().toLowerCase().includes(mnKeyword.toLowerCase())；
- 对于动态渲染内容，建议将逻辑封装为函数并在 MutationObserver 中监听 DOM 变化后重执行；
- 若关键词来自用户输入或 CMS，务必先 encodeURIComponent 或正则转义再用于匹配（但 :contains() 本身不支持，故推荐 text().includes() 路径）。
总结：body:contains(...) 不是可靠的条件判断依据。真正可控的方式是——限定作用域 + 使用纯文本关键词 + 采用 .text().includes() 原生方法替代 jQuery 伪类。这不仅修复了当前 Bug，也显著提升了代码可维护性与跨 jQuery 版本兼容性。
