去除HTML元素后用正则实现搜索词高亮失效，求解决方案

我想实现两个功能：移除文章里的所有HTML元素，同时给搜索关键词加上highlight类实现高亮。但现在正则表达式没按预期工作，我知道动态正则得用new RegExp()创建，但写出来的代码还是不对，以下是我的实现：

我的代码实现 #

JavaScript代码 #

const article = "some article content";

const format = (query, data) => {
    // remove all html elements
    const output =
      data.replace(/<[^>]*>?/gi, "").length > 400
        ? data.replace(/<[^>]*>?/gi, "").slice(0, 400) + "..."
        : data.replace(/<[^>]*>?/gi, "");

        //regex
    const highlight = new RegExp(String.raw`/${query}/`, "gi");

    // add highlight 
    return output.replace(
      highlight,
      `<span className="highlight">${query}</span>`
    );
  };

HTML代码 #

<p className="paragraph--s">{format(searchTag, article)}</p>

问题分析与修正 #

你的代码存在几个核心问题，修正后就能正常工作：

• 动态正则创建错误：new RegExp()的第一个参数不需要加/分隔符，直接传入匹配内容即可，加了/会导致正则把/query/当成完整匹配目标，自然找不到结果。
• 大小写匹配不一致：正则用了gi修饰符忽略大小写，但替换时直接用${query}会强制替换成搜索词的原始大小写，和原文不一致，应该用$&引用正则匹配到的原文内容。
• 重复正则执行浪费性能：你重复调用了三次移除HTML的正则，完全可以提取成变量只执行一次。
• 未转义正则特殊字符：如果搜索词包含.、*、+这类正则特殊字符，会导致匹配逻辑出错，需要先转义这些字符。

修正后的代码 #

const article = "some article content";

const format = (query, data) => {
    // 先移除所有HTML元素，只执行一次
    const strippedContent = data.replace(/<[^>]*>?/gi, "");
    // 处理内容截断
    const output = strippedContent.length > 400
        ? strippedContent.slice(0, 400) + "..."
        : strippedContent;

    // 转义搜索词中的正则特殊字符，避免干扰匹配
    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
    // 创建正确的动态正则
    const highlightRegex = new RegExp(escapedQuery, "gi");

    // 用$&引用匹配到的原文，保证大小写和原文一致
    return output.replace(
        highlightRegex,
        '<span className="highlight">$&</span>'
    );
};

HTML部分保持不变：

<p className="paragraph--s">{format(searchTag, article)}</p>

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