Angular中如何匹配多种格式撇号实现精准单词匹配？

问题根源 #

原代码仅转义了.和+，未处理'、’、‘、"这类撇号变体，同时未全面转义正则元字符，导致含这些符号的单词无法被正确匹配。

解决方案 #

1. 全面转义正则特殊字符：先对目标单词里的所有正则元字符做转义，避免干扰匹配逻辑。
2. 统一匹配撇号变体：将目标单词中的标准撇号替换为能覆盖所有常见撇号类型的正则字符集。
3. 保留原文本符号：替换时用$&引用匹配到的原内容，避免强制把原文本的撇号改成目标单词的格式。

完整代码实现 #

// 转义正则特殊字符的工具函数
escapeRegExp(str: string): string {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 处理文本高亮逻辑
highlightTargetWords() {
  // element为待匹配的目标单词，比如传入"can't"
  let escapedElement = this.escapeRegExp(element);
  // 将转义后的标准撇号替换为匹配所有撇号变体的正则规则
  escapedElement = escapedElement.replace(/\\'/g, '[’‘\'"]');
  
  // 构建正则并执行全局替换
  this.highlightedText = this.highlightedText.replace(
    new RegExp(escapedElement, 'g'),
    '<span>$&</span>'
  );
}

代码说明 #

• escapeRegExp函数：转义所有正则元字符（如.、+、?等），确保这些字符在正则中被当作普通文本匹配。
• 撇号替换逻辑：把转义后的\'替换成[’‘'"]，让正则能匹配任意一种撇号变体。
• $&用法：在替换字符串中代表正则匹配到的原内容，这样原文本里的can’t、can‘t都会被正确包裹，且保留原有撇号格式。

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