Angular如何将含URL的字符串分割为链接与非链接元素数组

• 场景：实现外层为可点击div的内容视图，内容由普通纯文本、可点击URL混合组成。当前存在非预期行为：点击链接时会同时触发外层div绑定的事件，需要给<a>元素添加event.stopPropagation()阻止事件冒泡。
• 最初尝试方案：通过自定义Pipe实现文本自动链接化，但方案失效。组件层无法为动态生成的a标签绑定点击事件，即便使用${}插值语法，写入的(click)=xxx内容也会被识别为普通字符串，无法绑定事件逻辑，原Pipe实现代码如下：

@Pipe({
  name: 'urlify'
})
export class UrlifyPipe implements PipeTransform {
  transform(text: any): any {
    const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z\d+&@#\/%?=~_|!:,.;]*[-A-Z\d+&@#\/%=~_|])/ig;

    return text.replace(urlRegex, (url) => {
      return '<a href="' + url + '">' + url + '</a>';
    });
  }
}

• 初步思路：实现一个接收文本输入的组件，初始化阶段将文本按普通内容、URL分割为数组。例如输入文本：Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://sadistic.pl.，期望分割得到的数组结构如下：

[
"Lorem Ipsum is simply dummy text ",
"www.wykop.pl ",
"of the printing and typesetting industry ",
"https://sadistic.pl",
"."
]

后续在模板中通过ngFor和ngSwitch渲染对应类型的元素，即可给<a>标签添加event.stopPropagation()逻辑。

• 核心疑问：
  1. 如何实现上述文本分割逻辑？
  2. 是否有其他更优方案解决问题？

1. 文本分割逻辑实现 #

利用String.split传入带捕获组的正则时，会将捕获到的匹配内容同时放入结果数组的特性，一次性拆分出普通文本和URL片段，正则同时覆盖带协议头（http/https/ftp/file）和无协议头的www开头域名，内部协议分组使用非捕获组避免产生冗余片段：

/**
 * 拆分混合了普通文本和URL的内容
 * 如果只需要纯字符串数组，去掉map逻辑直接返回过滤后的rawSegments即可，和示例期望结构完全一致
 */
splitTextContent(text: string): Array<{type: 'text' | 'url', content: string}> {
  if (!text) return [];
  // 匹配两类URL：带协议头的链接、www开头的无协议头域名，内部协议组用非捕获组避免冗余拆分
  const urlMatchRegex = /(\b(?:https?|ftp|file):\/\/[-A-Z\d+&@#\/%?=~_|!:,.;]*[-A-Z\d+&@#\/%=~_|]|\bwww\.[-A-Z\d+&@#\/%?=~_|!:,.;]*[-A-Z\d+&@#\/%=~_|])/ig;
  // split带捕获组时会保留匹配到的URL片段，不会丢失内容
  const rawSegments = text.split(urlMatchRegex);

  return rawSegments
    .filter(segment => typeof segment === 'string' && segment.length > 0) // 过滤空值
    .map(segment => {
      const isUrl = urlMatchRegex.test(segment);
      urlMatchRegex.lastIndex = 0; // 重置全局正则索引，避免连续匹配失效
      return {
        type: isUrl ? 'url' : 'text',
        content: segment
      }
    });
}

对应模板渲染逻辑：

<!-- 外层可点击div -->
<div (click)="handleContainerClick()">
  <ng-container *ngFor="let segment of splitSegments">
    <ng-container [ngSwitch]="segment.type">
      <!-- 普通文本渲染为span -->
      <span *ngSwitchCase="'text'">{{ segment.content }}</span>
      <!-- 链接渲染为a标签，直接绑定点击事件阻止冒泡 -->
      <a 
        *ngSwitchCase="'url'" 
        [href]="segment.content.startsWith('www') ? 'https://' + segment.content : segment.content"
        target="_blank"
        (click)="$event.stopPropagation()"
      >
        {{ segment.content }}
      </a>
    </ng-container>
  </ng-container>
</div>

2. 更优低成本方案：事件委托 #

不需要拆分文本、不需要新增组件，直接保留原来的Pipe实现思路，通过事件委托在外层div的点击事件中统一判断事件源即可，改造成本极低：

1. 首先修改原有Pipe，配合Angular的DomSanitizer返回受信任的HTML，同时补全www开头链接的协议头：

@Pipe({
  name: 'urlify'
})
export class UrlifyPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(text: string): SafeHtml {
    const urlRegex = /(\b(?:https?|ftp|file):\/\/[-A-Z\d+&@#\/%?=~_|!:,.;]*[-A-Z\d+&@#\/%=~_|]|\bwww\.[-A-Z\d+&@#\/%?=~_|!:,.;]*[-A-Z\d+&@#\/%=~_|])/ig;
    const replacedHtml = text.replace(urlRegex, (url) => {
      const href = url.startsWith('www') ? 'https://' + url : url;
      return `<a href="${href}" target="_blank">${url}</a>`;
    });
    return this.sanitizer.bypassSecurityTrustHtml(replacedHtml);
  }
}

2. 外层div绑定点击事件，判断点击目标如果是a标签，直接拦截不执行外层逻辑：

handleContainerClick(e: Event) {
  // 点击目标为链接时，阻止冒泡，不触发外层div逻辑
  if ((e.target as HTMLElement).tagName.toLowerCase() === 'a') {
    e.stopPropagation();
    return;
  }
  // 原有外层div的点击业务逻辑写在这里
}

3. 模板中直接通过innerHTML绑定Pipe转换后的内容即可：

<div (click)="handleContainerClick($event)" [innerHTML]="rawContent | urlify"></div>

该方案不需要处理动态生成DOM的事件绑定问题，后续内容更新也不需要额外维护事件逻辑，比拆分数组渲染的方案代码量少60%以上，且不存在内存泄漏风险。

内容的提问来源于stack exchange，提问作者D.Zet