Angular 8中innerHTML仅解析<br>、保留尖括号内容的问题求助

这个问题我之前也碰到过，核心原因是浏览器会把<FAR/OFF>这类非标准HTML标签当作元素处理，而不是普通文本——哪怕你用了DomSanitizer.bypassSecurityTrustHtml，它只是告诉Angular“这段HTML是安全的”，但浏览器本身还是会解析未知标签，导致你看不到预期的尖括号内容。

要实现仅解析<br>/<br/>、保留其他尖括号文本的效果，我们需要先对原始文本做预处理：把除了<br>系列标签之外的所有尖括号转成HTML实体（<→<，>→>），再交给DomSanitizer处理。

具体实现步骤： #

1. 修改你的sanitizeDsxText方法，添加文本预处理逻辑：

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

// 构造函数注入DomSanitizer
constructor(private sanitizer: DomSanitizer) {}

public sanitizeDsxText(text: string): SafeHtml {
  if (!text) return '';

  // 步骤1：用临时标记替换所有<br>和<br/>，避免后续被转义
  const tempBrMarker = '[[TEMP_BR]]';
  let processedText = text.replace(/<br\/?>/gi, tempBrMarker);

  // 步骤2：转义所有剩余的<和>为HTML实体
  processedText = processedText.replace(/</g, '&lt;').replace(/>/g, '&gt;');

  // 步骤3：把临时标记换回<br/>
  processedText = processedText.replace(new RegExp(tempBrMarker, 'g'), '<br/>');

  // 最后交给DomSanitizer信任这段HTML
  return this.sanitizer.bypassSecurityTrustHtml(processedText);
}

2. 更新模板代码，调用这个处理方法：

<td class="dsx-table__cell" [innerHTML]="sanitizeDsxText(item.target?.txt)"></td>

效果验证： #

对于你的示例文本：

Cześć wam, tu bliźniaki dwa <br/> Paprika – siostra, brat <FAR/OFF>

处理后会被转换成：

Cześć wam, tu bliźniaki dwa <br/> Paprika – siostra, brat &lt;FAR/OFF&gt;

浏览器会正确解析<br/>为换行，同时<FAR/OFF>会显示为<FAR/OFF>的文本内容，完美满足你的需求。

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