Angular正则匹配优化：避免匹配单词内部的目标词汇

架构老林

2026-8-22

解决方案

问题根源

原正则未添加独立词汇的边界约束，导致目标词汇作为其他单词的子串时被误匹配（如"lookman"中的"MAN"）。

核心修改点

转义正则特殊字符：避免目标词汇中的正则元字符（如.、*等）破坏正则结构
添加Unicode兼容的边界断言：用(?<!\p{L})（前面不是Unicode字母）和(?!\p{L})（后面不是Unicode字母）确保目标词汇是独立单元，同时启用u标志支持土耳其语特殊字符（如ç、ğ）的匹配

修改后的代码

正则转义工具函数

private escapeRegExp(str: string): string {
  // 转义所有正则特殊元字符
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

生成修正后的正则

const escapedKeywords = this.highlightWordList.map(item => {
  const escapedWord = this.escapeRegExp(item.highWord);
  // 添加Unicode边界断言，确保词汇独立存在
  return `(?<!\\p{L})${escapedWord}(?!\\p{L})`;
});

const searchRgx = new RegExp(escapedKeywords.join("|"), 'giu');

保留原替换逻辑（无需修改）

return txt.replace(searchRgx, (match) => {
  const foundedKeyword = this.highlightWordList.find(item => 
    item.highWord.toLowerCase() === match.toLowerCase()
  ) || { color: 'white' };

  return `<span style='background-color:${foundedKeyword.color};'>${match}</span>`;
});