Angular 在字符串中找到标签并替换为真正的 html 标签。

Question

我从后台得到一个字符串，当我显示它时。< br/> 看起来像文本。

我想把它们转换成真正的HTML标签，或者用真正的换行来代替。

这是从后台获取的字符串。

Description from backend Description from <br/> backend Description
from backend Description from backend <br/>Description <br/>from <br/>
backend Description from backend <br/> Description from backend
Description from backend Description from backend

这是我的功能：

ngOnInit(): void {
    this.uns = this.sentence$.subscribe(res => {
        this.sentence = res;
        if (this.sentence && this.sentence.length > 0) {
            this.sentence = res.replace('<br/>', '\n');
        }
    });
}

Answer 1

你在哪里显示它？如果它在文本区域或输入框内，那么你需要替换为 <br> 用新行代替，如果是在div内，你就不必这样做。要替换 <br> 你需要做的。

this.sentence = res.split("<br>").join("\n")

Answer 2

我找到了最好的解决方案。

我只需要添加Angular指令（[innerHtml]）来格式化文本和解释html标签。

像这样。

<p [innerHTML]="sentence$ | async"></p>

Answer 3

HTML不会因为你有空白字符就打印它们，它只会打印第一个空格，然后跳过其余的。

你可以使用一个 <pre></pre> 标签来解决这个问题，然后你可以使用类似于 sentence = sentence.split("<br>").join("\n") 矫治 <br/> 问题。