Angular中如何将<br>替换为换行？求[innerHTML]替代方案

下面给你两个靠谱的替代方案，避开[innerHTML]带来的大写问题：

方案1：自定义管道+CSS换行 #

先创建一个管道，把字符串里的<br>（包括<br/>这类闭合写法）替换成换行符\n：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'brToNewLine' })
export class BrToNewLinePipe implements PipeTransform {
  transform(value: string): string {
    return value ? value.replace(/<br\s*\/?>/gi, '\n') : '';
  }
}

在组件所属的模块中声明这个管道，之后在模板里这样用：

<p class="line-break">{{ a.Details | brToNewLine }}</p>

最后添加CSS样式让换行符生效：

.line-break {
  white-space: pre-line;
}

这个方法直接处理纯文本，不会触发HTML解析，自然不会被全局或组件的大写样式影响。

方案2：拆分字符串循环渲染 #

直接把目标字符串按<br>分割成数组，循环渲染每一段内容：

<ng-container *ngIf="a.Details">
  <p *ngFor="let line of a.Details.split(/<br\s*\/?>/gi)">{{ line }}</p>
</ng-container>

如果不想在模板里写正则，也可以把拆分逻辑放到组件代码里：

// 组件.ts文件中
get splitDetails(): string[] {
  return this.a.Details ? this.a.Details.split(/<br\s*\/?>/gi) : [];
}

然后模板里简化成：

<p *ngFor="let line of splitDetails">{{ line }}</p>

每一段都是独立的文本节点，完全不会受HTML解析相关的样式干扰。

补充说明：你之前用[innerHTML]出现全大写，大概率是项目里存在全局的text-transform: uppercase样式，刚好作用到了<p>标签上，而innerHTML解析后的内容继承了这个样式。上面两个方案都绕开了innerHTML，自然不会出现这个问题。

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