jQuery追加段落时特定关键词无法全部高亮，请求排查代码问题

你遇到的关键词无法全部高亮的问题，核心来自以下几处代码缺陷：

1. jQuery :contains() 选择器大小写敏感 #

:contains() 默认区分大小写，若关键词与文本中的大小写不一致（比如关键词是"Apple"，文本里是"apple"），这部分文本会直接被跳过高亮处理。

2. 正则表达式边界限制过严 #

你的正则规则 ([' ]|^)${search}(?=[ ]|$|,|') 仅匹配关键词前后是空格、单引号、开头/结尾或逗号的场景，若关键词旁是句号、分号、感叹号等其他标点，就无法触发匹配，导致漏高亮。

3. 未转义正则特殊字符 #

如果关键词包含正则元字符（如 .、*、+、? 等），正则会将其当作匹配规则而非普通字符，直接导致匹配失败。

4. 替换时的空格冗余 #

你在替换模板中给关键词额外添加了前后空格：<span class='text-red'> ${search} </span>，会破坏原文本的空格结构，甚至可能引发重复匹配错误。

修复后的代码 #

// 插入DOM逻辑保持不变
$(`<tr class="key-empty" id="${id}" >
    <td colspan="3" class="text-left keyword-td " >
      <div class="td_div">
        ${sentence.map((val, i) => `<div class="d-flex shadow_"><i class="fa fa-circle mt-1 " style="font-size: 10px;"></i>&nbsp;&nbsp;<span class="m-0 text-gray font-14 fw-400 keyword-para" id="key_${i}" > ${val} </span></div>`).join("<br>")}
      </div>
    </td>
</tr>`).insertAfter(row);

var search = keyword;

// 自定义不区分大小写的contains选择器
$.expr[":"].containsIgnoreCase = function(a, i, m) {
    return $(a).text().toLowerCase().indexOf(m[3].toLowerCase()) >= 0;
};

// 转义关键词中的正则特殊字符
const escapedSearch = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// 匹配独立单词边界，忽略大小写且全局匹配
const regex3 = new RegExp(`(\\b|^)${escapedSearch}(\\b|$)`, 'gi');

// 遍历目标元素执行高亮
$(".keyword-para:containsIgnoreCase(" + search + ")").each(function () {
    const originalText = $(this).text();
    // 保留原文本大小写进行替换
    const highlightedText = originalText.replace(regex3, `<span class='text-red'>$&</span>`);
    $(this).html(highlightedText);
});

关键修复说明 #

• 新增 containsIgnoreCase 自定义选择器，彻底解决大小写不匹配问题
• 通过 escapedSearch 转义正则特殊字符，避免关键词含特殊符号时匹配失效
• 正则改用 \b（单词边界）匹配，覆盖更多合法的关键词出现场景，同时加 i 标志忽略大小写
• 替换时用 $& 引用匹配到的原文本，保留原内容的大小写与格式

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