在 Angular 模板绑定中剥离 html答案

【问题标题】：Strip html in Angular template binding在 Angular 模板绑定中剥离 html
【发布时间】：2018-02-26 12:55:41
【问题描述】：

我有一个列表显示有时可能包含 HTML 的数据

  <li *ngFor="let result of results">
    <span [innerHTML]="result.question.title">
    </span>
  </li>

使用innerHTML 的问题在于HTML 会被解析和渲染，因此<p> 标签之类的东西会添加边距并破坏列表的对齐方式。

我想去掉所有的 html 标签，只输出纯文本。

这样的方法：

  <li *ngFor="let result of results">
    <span>
        {{result.question.title}}
    </span>
  </li>

不剥离 HTML，它只是将 HTML 输出为纯文本。

如何剥离 HTML 并以“Angular”方式保留纯文本？

【问题讨论】：

“剥离 HTML”不会导致“纯文本”吗？你到底在期待什么？也许您应该展示一个样本以及您期望的结果。但通常，当您删除所有 HTML 标记时，剩下的只是“纯文本”。如果你的意思是别的，那么它需要一个更好的解释。最好按照建议的示例显示。
@NeilLunn 这正是我的意思。我期待纯文本。我不是别的意思
因为我（和我认为其他人）的印象是标记会被清理和删除，然后再次建议“向我们展示可重现的样本”而不是仅仅谈论它。
您的印象是正确的。

标签： html angular angular2-template

【解决方案1】：

我想没有直接的方法可以从字符串中去除 HTML 标签，你可以使用Pipe，像这样写一个“管道”：

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

@Pipe({
    name: 'striphtml'
})

export class StripHtmlPipe implements PipeTransform {
    transform(value: string): any {
        return value.replace(/<.*?>/g, ''); // replace tags
    }
}

然后将“StripHtmlPipe”添加到您的模块“声明”中，完成这些步骤后，您可以在 HTML 中使用此管道：

<li *ngFor="let result of results">
    <span>
        {{result.question.title | striphtml}}
    </span>
  </li>

请注意，上面的代码没有经过全面测试。

【讨论】：

如果不起作用，请尝试<span [innerHTML]="content | striphtml"></span>
像魅力一样工作！

【解决方案2】：

我不建议按照建议使用正则表达式来解析 html 风筝.js.org。改用浏览器textContent / innerText 函数：

htmlToText(html: string) {
    const tmp = document.createElement('DIV');
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
}

这应该更可靠。如果你愿意，你仍然可以使用管道，只是不要使用正则表达式来解析 html！

【讨论】：