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