如何用JavaScript实现关键词搜索并仅显示含关键词的内容片段

需求 #

输入关键词搜索时，仅显示包含该关键词的<li>内容区块，同时标红区块内的关键词；而非仅标红关键词却保留所有内容。

现有问题 #

已实现关键词标红，但无法隐藏不含关键词的内容片段。

修改后的完整代码 #

JavaScript

$(function() {
  $("#js-search").on('click', function() {
    let keyword = $("#keyWord").val().trim();
    // 重置状态：显示所有区块，移除之前的标红
    $("li").show();
    $("p, h1").each(function() {
      $(this).text($(this).text());
    });

    if (!keyword) return;

    $("li").each(function() {
      const $li = $(this);
      const hasKeyword = $li.text().includes(keyword);
      
      if (hasKeyword) {
        // 标红当前区块内的所有关键词
        $li.find("p, h1").each(function() {
          const text = $(this).text();
          const highlighted = text.replace(new RegExp(keyword, 'g'), `<span class="red">$&</span>`);
          $(this).html(highlighted);
        });
      } else {
        // 隐藏不含关键词的区块
        $li.hide();
      }
    });
  });
});

CSS

.red {
  color: red;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="keyWord" type="text"><button id="js-search">搜索</button>

<ul>
  <li>
    <h1>关于回馈</h1>
    <p>这是关于回馈的回答内容</p>
  </li>
  <li>
    <h1>信用卡支付问题</h1>
    <p>信用卡支付相关问题内容</p>
  </li>
  <li>
    <h1>退货相关</h1>
    <p>退货问题的相关内容</p>
  </li>
  <li>
    <h1>注册指南</h1>
    <p>如何注册成为会员</p>
  </li>
</ul>

关键改动说明 #

1. 状态重置：每次搜索前先显示所有<li>，并移除之前添加的标红标签，避免多次搜索后状态混乱。
2. 区块级判断：遍历每个<li>区块，检查整个区块的文本是否包含关键词，而不是仅检查<p>标签。
3. 全局标红：使用正则表达式的g标志，匹配区块内所有出现的关键词并标红，支持关键词多次出现的场景。
4. 区块隐藏：对不含关键词的区块直接调用hide()方法隐藏，仅保留含关键词的内容。

内容的提问来源于stack exchange，提问作者AWEI