如何实现含HTML标签文本的JavaScript高亮（加粗）功能？

我懂你的困扰——直接用正则全局替换的话，很容易误改HTML标签里的字符，比如你例子里的<b>标签里的b就会被错误处理。下面这个方案能精准只高亮标签外的文本内容，完全避开HTML标签内部的字符：

实现代码 #

// 转义正则特殊字符，避免搜索词里的符号破坏正则逻辑
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function highlightSearchTerm(htmlString, searchTerm) {
  // 空搜索词直接返回原文本
  if (!searchTerm.trim()) return htmlString;

  const escapedSearchTerm = escapeRegExp(searchTerm);
  // 不区分大小写的匹配正则，保留原字符大小写
  const matchRegex = new RegExp(`(${escapedSearchTerm})`, 'gi');

  // 核心逻辑：拆分HTML为「标签片段」和「文本片段」，只处理文本片段
  return htmlString.replace(/(<[^>]+>|[^<]+)/g, fragment => {
    // 如果是HTML标签（以<开头），直接保留原样
    if (fragment.startsWith('<')) {
      return fragment;
    }
    // 文本片段里匹配搜索词，用<b>标签包裹高亮
    return fragment.replace(matchRegex, '<b>$1</b>');
  });
}

测试你的示例 #

const originalHtml = '<b>test string</b> -- Bette <b>Higgins</b>';
const highlighted = highlightSearchTerm(originalHtml, 'b');
console.log(highlighted);
// 输出：<b>test string</b> -- <b>B</b>ette <b>Higgins</b>

关键思路说明 #

1. 拆分HTML内容：用正则/(<[^>]+>|[^<]+)/g把整个字符串拆成两类片段：要么是完整的HTML标签（比如<b>、</b>），要么是标签外的纯文本。
2. 精准处理文本：只对非标签的文本片段进行搜索替换，标签片段直接跳过，从根源上避免误改标签内部的字符。
3. 正则转义：先转义搜索词里的特殊字符（比如.、*这类正则元字符），保证搜索词不管是什么内容都能正确匹配。

这个方案还支持不区分大小写的匹配，同时保留原文本的大小写（比如搜索b时，Bette里的B会被高亮成<b>B</b>，而不是强制变成小写）。

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