如何用HTML和JavaScript高亮文本中的完整负面词汇而非部分匹配

你的问题出在正则表达式没有限制完整单词匹配，导致子串被误匹配。要实现仅高亮完整单词，核心是给正则加上单词边界约束，同时优化替换逻辑避免重复操作DOM。

基础修改方案 #

直接在原有正则前后添加\b（正则中的单词边界，匹配单词字符与非单词字符的分界，或字符串首尾）：

{% for neg in negative_words_list %}
var m = document.getElementById("a");
// 给正则添加单词边界\b，确保只匹配完整单词
m.innerHTML = m.innerHTML.replace(new RegExp(`\\b${neg}\\b`, 'ig'), "<font color=red>$&</font>");
{% endfor %}

更高效的优化方案 #

上面的循环多次修改innerHTML会重复解析DOM，还可能导致已高亮的内容被二次处理。建议合并所有负面词为一个正则，一次性完成替换：

// 1. 转义负面词中的正则特殊字符（如.、*、+等），避免正则语法错误
var escapedNegWords = [{% for neg in negative_words_list %} "{{neg}}"{% if not forloop.last %},{% endif %}{% endfor %}].map(word => 
  word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
);
// 2. 合并为一个匹配所有负面词的正则，使用单词边界约束
var negRegex = new RegExp(`\\b(${escapedNegWords.join('|')})\\b`, 'ig');
// 3. 一次性替换所有匹配项
var targetEl = document.getElementById("a");
targetEl.innerHTML = targetEl.innerHTML.replace(negRegex, '<font color=red>$1</font>');

处理含特殊字符的负面词 #

如果你的负面词包含非单词字符（比如don't、bad-ass），\b可能失效，这时候改用前后断言来匹配独立词汇：

var negRegex = new RegExp(`(?<!\\w)(${escapedNegWords.join('|')})(?!\\w)`, 'ig');

(?<!\w)表示前面不能是单词字符，(?!\w)表示后面不能是单词字符，能更精准匹配带特殊符号的完整词汇。

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