如何实现搜索时将整篇文章中匹配关键词的文字修改为红色显示

你现有代码的逻辑是提取匹配搜索词的前后片段拼接返回，所以会丢失原文其他内容。调整思路为保留完整原文，仅给所有匹配的搜索词套红色样式标签即可，同时增加正则特殊字符转义避免搜索特殊字符时报错。

修改后的完整代码 #

JS 代码

// 存储原始的完整文本，避免替换后污染原始内容
const originalContent = document.getElementById("one").innerHTML;
const elDemo = document.getElementById("one");

// 转义正则特殊字符，避免搜索特殊字符时报错
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function highlightQuery(queryString, content) {
  // 搜索词为空时直接返回原始内容
  if (!queryString.trim()) return content;
  const escapedQuery = escapeRegExp(queryString);
  // 全局匹配所有搜索词，忽略大小写
  const regExp = new RegExp(`(${escapedQuery})`, 'ig');
  // 替换匹配内容为红色高亮样式，保留其他所有内容
  return content.replace(regExp, '<span style="color: red; font-weight: bold;">$1</span>');
}

document.getElementById("txt1").addEventListener("input", function() {
  const highlightedContent = highlightQuery(this.value, originalContent);
  elDemo.innerHTML = highlightedContent;
});

HTML 代码（和原有逻辑一致，仅调整了占位符中文翻译）

<input type="search" class="form-control" id="txt1" placeholder="搜索" aria-label="搜索内容" aria-describedby="basic-addon1">

<div id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusantium facilis facere et ipsum quas itaque voluptatum similique at autem ullam quidem magni error maxime laborum nihil optio cupiditate, magnam fuga. Expedita, aliquam dignissimos veniam cupiditate assumenda nesciunt quod perferendis, rem dolor harum ipsa ullam. Nihil similique voluptate mollitia veniam!</div>

可选调整说明 #

• 如果不需要加粗效果，直接去掉font-weight: bold样式即可
• 可以将高亮样式抽为独立CSS类，后续调整样式更灵活，例如：

.highlight {
  color: red;
  font-weight: bold;
}

替换时直接用<span class="highlight">$1</span>即可

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