Angular DomSanitizer替换textarea换行符及自定义sanitizer可行性咨询

关于Angular DomSanitizer的定位 #

DomSanitizer不是增强型文本替换器，它的核心职责是做安全校验、防范XSS攻击。默认逻辑会自动转义或移除它判定为不安全的HTML内容，本质是安全防护工具，而非文本处理工具。

实现你的需求：移除特殊字符+保留换行 #

不需要自定义整个sanitizer，只需要在自定义管道里先做文本预处理，再结合目标控件的特性适配显示逻辑即可，具体实现如下：

1. 自定义处理管道 #

创建一个管道，先移除</>这类字符，再根据控件类型处理换行：

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

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

  transform(content: string, forTextarea: boolean = false): SafeHtml | string {
    // 移除<、>特殊字符
    let processed = content.replace(/[<>]/g, '');

    if (forTextarea) {
      // textarea场景：保留原生换行符，直接返回纯文本
      return processed;
    } else {
      // 普通HTML元素场景：将换行转为<br>，并标记为安全HTML
      processed = processed.replace(/\n/g, '<br>');
      return this.sanitizer.bypassSecurityTrustHtml(processed);
    }
  }
}

2. 不同控件的使用方式 #

• 普通HTML元素（如div）显示（渲染换行）：

<div [innerHTML]="yourContent | customContent"></div>

• textarea输入框显示（保留原生换行）：

<textarea [value]="yourContent | customContent:true"></textarea>

为什么之前替换<br>会显示字面量？ #

textarea是纯文本控件，不会解析HTML标签，所以你把\n换成<br>后，它只会把这个字符串当作普通文本显示，而不是渲染成换行。只有在支持HTML渲染的元素（如div）中，<br>才会被解析为换行。

关于自定义Sanitizer的可行性 #

Angular允许通过DomSanitizer的子类自定义实现，但不建议这么做——默认的sanitizer已经覆盖了绝大多数XSS防护场景，自定义容易引入安全漏洞。你的需求属于文本预处理范畴，不需要改动sanitizer核心逻辑，用上面的管道方案更安全可控。

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