如何用JavaScript清除上一次搜索关键词的高亮效果？

问题描述 #

我用JavaScript实现了关键词搜索文本高亮功能，但现在有个问题：搜索下一个关键词时，之前被高亮的文本没法恢复成原本的黑色，还是保持红色高亮。怎么修改代码解决这个问题？

修改后的完整代码 #

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>I am an example of related content</p>
  </li>
  <li>
    <h1>信用卡问题</h1>
    <p>This is about credit card issues, you can search for keywords to find keywords</p>
  </li>
  <li>
    <h1>订单取消问题</h1>
    <p>order cancellation problemThis is a sample text of random typing content</p>
  </li>
</ul>

CSS #

.highlight {
  color: red;
}

JavaScript #

// 初始化：保存每个p标签的原始文本到data属性
$(document).ready(function() {
  $('p').each(function() {
    $(this).data('original-content', $(this).text());
  });

  $('#js-search').on('click', function() {
    const keyword = $('#keyWord').val().trim();
    
    // 遍历所有p标签，先恢复原始内容
    $('p').each(function() {
      const originalContent = $(this).data('original-content');
      $(this).text(originalContent);
    });

    // 如果关键词不为空，执行高亮
    if (keyword) {
      const regex = new RegExp(keyword, 'gi');
      $('p').each(function() {
        const content = $(this).text();
        const highlightedContent = content.replace(regex, (match) => {
          return `<span class="highlight">${match}</span>`;
        });
        $(this).html(highlightedContent);
      });
    }
  });
});

核心优化说明 #

• 保存原始文本：页面加载时，把每个<p>标签的原始纯文本存储到data-original-content属性中，避免在已嵌套高亮标签的HTML上反复修改，导致结构混乱和旧高亮残留。
• 先恢复再高亮：每次点击搜索按钮，先将所有<p>的内容重置为原始文本，再对新关键词进行高亮处理，彻底清除之前的高亮痕迹。
• 处理空关键词：如果输入框为空，点击搜索会直接清除所有高亮，恢复所有文本的默认样式。
• 使用CSS类管理样式：把高亮样式抽离到CSS类.highlight中，比内联样式更易维护，也方便后续修改高亮效果。
• 统一代码风格：全程使用jQuery调用，避免原生JS和jQuery混合写法，代码更简洁一致。

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