Angular中如何转义数据字符串并自定义构建可解析HTML

要实现将字符串数组转义为纯文本，同时添加<br>等安全格式并在DIV中渲染，可通过以下步骤完成：

核心思路 #

1. 转义数据字符串：将字符串中的HTML特殊字符（<, >, &, ", '）转换为HTML实体，确保原始标签仅作为文本显示。
2. 拼接安全HTML：用<br>或其他安全格式连接转义后的字符串。
3. 标记安全内容：通过Angular的DomSanitizer将拼接后的内容标记为安全HTML，避免被框架过滤。

方案一：组件内直接处理 #

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-text-display',
  template: `<div [innerHTML]="safeHtmlContent"></div>`
})
export class TextDisplayComponent implements OnInit {
  // 示例数据数组
  dataArray = ["First Element", "<p>Second Element</p>"];
  safeHtmlContent!: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    // 转义每个数组元素
    const escapedItems = this.dataArray.map(item => this.escapeHtml(item));
    // 用<br>拼接转义后的内容
    const rawHtml = escapedItems.join('<br>');
    // 标记为安全HTML，允许Angular渲染
    this.safeHtmlContent = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  }

  // HTML转义工具函数
  private escapeHtml(str: string): string {
    return str.replace(/[&<>"']/g, char => {
      const entityMap: Record<string, string> = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;'
      };
      return entityMap[char];
    });
  }
}

方案二：自定义管道（复用性更强） #

如果需要在多个组件中复用该逻辑，可封装为Angular管道：

1. 创建转义拼接管道 #

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

@Pipe({ name: 'escapeJoin' })
export class EscapeJoinPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(arr: string[], separator: string = '<br>'): SafeHtml {
    const escapedArr = arr.map(item => this.escapeHtml(item));
    const combinedHtml = escapedArr.join(separator);
    return this.sanitizer.bypassSecurityTrustHtml(combinedHtml);
  }

  private escapeHtml(str: string): string {
    return str.replace(/[&<>"']/g, char => {
      const entityMap: Record<string, string> = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;'
      };
      return entityMap[char];
    });
  }
}

2. 在模板中使用管道 #

<!-- 直接传入数组，默认用<br>分隔 -->
<div [innerHTML]="dataArray | escapeJoin"></div>

<!-- 自定义分隔符，比如用<p>标签包裹每个元素 -->
<div [innerHTML]="dataArray | escapeJoin:'<p></p>'"></div>

关键说明 #

• 手动转义确保了原始字符串中的HTML标签不会被解析，仅以文本形式展示。
• 使用bypassSecurityTrustHtml是安全的，因为拼接后的内容仅包含转义后的文本和你明确允许的安全HTML（如<br>），不会引入XSS风险。

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