Angular管道正则匹配：排除a标签内内容并包裹span无结果问题

需求是实现一个Angular管道，能匹配文本中所有指定query内容，但**不处理标签内部（包括标签属性和标签内文本）**的匹配项，匹配到的内容用<span class="highlight">匹配内容</span>包裹。

示例 #

当query = 'cat'时：

• 输入：this is some text for a cat

• 输出：this is some text for a <span class="highlight">cat</span>

• 输入：this is some text with a link <a href="link-to-a-file-named-cat.pdf">Some text</a>

• 输出：保持原文本不变（cat出现在标签的属性中，不会被高亮）

我尝试过的两种无效方案 #

方案一：使用负向预查正则

const expression = `^(?!.*<a\\b[^>]*>.*${query}.*<\\/a>).*${query}.*`;
const regex = new RegExp(expression, 'gm');
const match = text.match(regex);

if (match) {
  text = text.replace(regex, `<span class="highlight">${match[0]}</span>`);
}

方案二：替换时判断匹配位置是否在标签内

const regex = new RegExp(query, 'gm');
return text.replace(regex, (match) => {
  // 检查匹配项是否在<a>标签内
  const tagRegex = /&lt;a[^&gt;]+&gt;/gi;
  const insideTag= text.substr(0, text.indexOf(match)).match(tagRegex );
  if (insideTag && insideTag.length > 0) {
    // 返回原匹配内容不修改
    return match;
  } else {
    // 返回高亮后的内容
    return `&lt;span class=&quot;highlight&quot;&gt;${match}&lt;/span&gt;`;
  }
});

正确实现方案 #

核心思路是把文本拆分为<a>标签块和普通文本块，只对普通文本块执行高亮替换，避免复杂的正则断言逻辑，同时处理query中的正则特殊字符。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'highlightExcludeLinks' })
export class HighlightExcludeLinksPipe implements PipeTransform {
  transform(text: string, query: string): string {
    if (!query.trim() || !text) return text;

    // 转义query中的正则特殊字符，避免正则语法错误
    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    // 正则：匹配完整的<a>标签（包括属性和内部文本）
    const linkRegex = /(<a\b[^>]*>.*?<\/a>)/gi;
    // 将文本拆分为「<a>标签」和「普通文本」交替的数组
    const textParts = text.split(linkRegex);

    return textParts.map(part => {
      // 判断当前片段是否是<a>标签，是则直接返回
      if (linkRegex.test(part)) {
        return part;
      }
      // 普通文本片段：执行高亮替换
      const highlightRegex = new RegExp(escapedQuery, 'gi');
      return part.replace(highlightRegex, '<span class="highlight">$&</span>');
    }).join('');
  }
}

原方案问题分析 #

1. 方案一：正则逻辑错误，该正则会匹配整行包含不在标签内的query，替换时会把整行内容替换成高亮块，而非单独高亮query；同时无法处理同一行内既有标签又有外部query的情况。
2. 方案二：判断逻辑存在漏洞：
   • text.indexOf(match)只会返回第一个匹配项的位置，当文本中有多个相同query时，后续匹配项的位置判断会出错；
   • 仅统计前面的标签数量，未考虑标签是否已经闭合，会误判已经闭合的标签之后的query。