基于关键词显示/隐藏HTML代码失效问题求助

你的代码问题出在jQuery的:contains()选择器无法正确处理带特殊字符的关键词，比如[aaa]里的方括号、(kk-aka)里的括号，这些字符在CSS选择器语法中有特殊含义，直接拼接会导致选择器解析错误，使得判断条件始终为真，所以元素一直显示。

解决办法是放弃:contains()，改用filter()方法手动检查元素文本内容，这样能避免特殊字符的干扰：

修改后的JavaScript代码 #

$(document).ready(function() {
  var dateKeyword = "[aaa]";
  // 遍历body下的所有元素，检查是否包含目标关键词
  var hasDateKeyword = $('body *').filter(function() {
    return $(this).text().includes(dateKeyword);
  }).length > 0;
  
  if (hasDateKeyword) {
    $("#date").show();
    $("#current-date").text(new Date().toDateString());
  } else {
    $("#date").hide();
  }

  var mnKeyword = "(kk-aka)";
  var hasMnKeyword = $('body *').filter(function() {
    return $(this).text().includes(mnKeyword);
  }).length > 0;
  
  if (hasMnKeyword) {
    $("#mn").show();
  } else {
    $("#mn").hide();
  }
});

对应的HTML代码（无需改动） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

补充说明 #

• filter()方法会遍历指定范围内的所有元素，用includes()检查文本是否包含关键词，不受特殊字符影响。
• 如果只需要检查body的直接文本内容，而非所有子元素，可以把$('body *')改成$('body')，根据实际需求调整。

内容的提问来源于stack exchange，提问作者Md. Ibrahim