Angular 2+中如何自动将字符串内的链接识别转换为可点击URL

实现逻辑 #

核心是通过正则匹配文本中的URL片段，替换为带正确属性的a标签，结合Angular内置的安全消毒能力规避XSS风险，封装成管道方便全局复用。 #

1. 编写通用链接转换管道 #

管道是Angular中处理文本格式化的最佳实践，一次编写可在所有模板中复用：

// linkify.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'linkify',
  standalone: true // 非standalone项目可去掉该行，改为在对应模块声明
})
export class LinkifyPipe implements PipeTransform {
  // 正则匹配两类URL：http/https开头的链接、www开头的无协议链接
  private readonly urlMatchReg = /(https?:\/\/[^\s]+)|(www\.[^\s]+)/g;

  constructor(private sanitizer: DomSanitizer) {}

  transform(plainText: string): SafeHtml {
    if (!plainText?.trim()) return '';

    const htmlContent = plainText.replace(this.urlMatchReg, (matchedUrl) => {
      // 给无协议的www开头链接自动补https前缀
      const validHref = matchedUrl.startsWith('http') ? matchedUrl : `https://${matchedUrl}`;
      // 拼接a标签，加上安全属性，默认新标签页打开
      return `<a href="${validHref}" target="_blank" rel="nofollow noreferrer">${matchedUrl}</a>`;
    });

    // 对拼接好的HTML做安全消毒，放行可信内容
    return this.sanitizer.bypassSecurityTrustHtml(htmlContent);
  }
}

2. 引入管道 #

• Standalone组件：直接在组件的imports数组中引入LinkifyPipe即可
• 非Standalone项目：在需要用到该功能的业务模块（或SharedModule）的declarations、exports数组中添加LinkifyPipe

3. 模板中使用 #

拿到文本字段的内容后，通过[innerHTML]绑定经过管道处理的内容即可：

<!-- 假设组件中定义了文本属性：userText = 'text1 www.google.com test2' -->
<div class="text-content" [innerHTML]="userText | linkify"></div>

注意事项 #

• 可根据业务需求调整正则规则，比如增加对不带www的域名、自定义协议链接的匹配，注意不要让正则过于宽泛导致误匹配普通文本
• 必须使用DomSanitizer处理拼接后的HTML，禁止直接插入未经过安全校验的自定义HTML，避免XSS注入风险
• 超链接的样式可通过父容器选择器自定义，示例：

.text-content a {
  color: #2563eb;
  text-decoration: none;
}
.text-content a:hover {
  text-decoration: underline;
}

最终渲染效果和预期完全一致：普通文本正常展示，识别到的URL自动转换为可点击的超链接。

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