如何用JavaScript或jQuery实现页面关键词搜索高亮与匹配展示功能？

原代码的问题： #

• 在页面加载时就获取了inputValue，点击搜索时用的还是初始空值，根本没拿到用户输入的关键词
• $("p:contains(inputValue)")里的inputValue被当成字符串字面量处理，不是变量，永远匹配不到实际内容
• 仅修改了整个段落的颜色，没实现隐藏不匹配内容的需求，也没有只高亮关键词本身

修正后的完整代码： #

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>

JavaScript 代码

$('#js-search').on('click', function() {
  // 点击搜索时才获取最新输入的关键词，去除首尾空格
  const inputValue = $.trim($('#keyWord').val());
  
  // 输入为空时，恢复所有内容并清除之前的高亮
  if (!inputValue) {
    $('li').show();
    $('p').each(function() {
      $(this).html($(this).text());
    });
    return;
  }

  // 逐个检查每个列表项
  $('li').each(function() {
    const $paragraph = $(this).find('p');
    const textContent = $paragraph.text();

    if (textContent.includes(inputValue)) {
      // 显示匹配的项，高亮关键词
      $(this).show();
      // 把关键词替换为红色高亮的span标签，gi表示全局匹配+忽略大小写（不需要大小写忽略可去掉i）
      const highlightedText = textContent.replace(new RegExp(inputValue, 'gi'), matched => `<span style="color:red">${matched}</span>`);
      $paragraph.html(highlightedText);
    } else {
      // 隐藏不匹配的项
      $(this).hide();
    }
  });
});

核心改进说明： #

• 实时获取关键词：将获取输入值的逻辑移到点击事件内部，确保每次搜索使用的都是用户当前输入的内容
• 正确匹配内容：用includes()判断段落是否包含关键词，若要使用:contains()需写成模板字符串拼接变量的形式：$(p:contains('${inputValue}'))
• 过滤显示内容：通过show()/hide()控制列表项的显示状态，仅保留包含关键词的内容
• 精准高亮关键词：使用正则表达式替换，仅给匹配到的关键词添加红色样式，而非整个段落变色
• 空值兼容处理：输入为空时自动恢复所有内容的显示状态，避免页面持续处于部分隐藏状态

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