在 Angular 中将 HTML 字符串显示为纯文本答案

【问题标题】：Show HTML string as plain text in Angular在 Angular 中将 HTML 字符串显示为纯文本
【发布时间】：2020-06-22 01:43:13
【问题描述】：

我正在使用 Angular 开发博客。在那里，我想将从数据库中检索到的 HTML 字符串显示为纯文本（用于列出每个博客文章的预览）。 HTML 富文本是使用ngx-quill 生成的。

我可以使用代码<quill-view [content]="post.content"></quill-view> 呈现富文本。但我需要将相同的内容呈现为纯文本。

我怎样才能以ngx-quill / Angular 的方式做到这一点。请帮忙！我不喜欢使用 JavaScript 获取 DOMElement.text() 方法。

【问题讨论】：

你看过/试过angular.io/guide/…吗？
这有帮助吗？ stackoverflow.com/q/46911008/1160794

标签： angular quill ngx-quill

【解决方案1】：

我不知道羽毛笔..

所以可能会有另一个好的解决方案

我认为你可以用这样的管道解决这个问题

@Pipe({ name: 'truncateHtml' })
export class TruncateHtmlPipe implements PipeTransform{

    constructor() { }

    transform(text: string ) {

        if (!text) {
            return text;
        }

        let without_html = text.replace(/<(?:.|\n)*?>/gm, ' ');
        
        return without_html;
    }

}

如果你不想在模板中使用

只需返回该值并使用它

希望对你有帮助

【讨论】：

这个解决方案对我有用。但是在这个管道操作之后，我有一些额外的空格和换行符。要删除它，我添加了以下正则表达式。 .replace(/ +(?= )/g,'') // 替换多个空格 .replace(/ /gi," ") // 替换HTML编码字符（这里是） .replace( /(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\n\n") // 替换多个新行将这些表达式添加到管道中非常适合我。

【解决方案2】：

我认为你可以像这样使用innerHTML

<div [innerHTML]="blogPost"></div>

我以前也用过 Quill

【讨论】：

变量“blogPost”有一个 HTML 字符串。您的解决方案将按原样显示内容。我需要将其显示为纯文本。因此，字符串“blogPost”中没有可用的 HTML 标记。
这将呈现 HTML 字符串。但我需要将它呈现为纯文本。上面的答案对我有用，它会去掉所有的 HTML 标签，我可以得到纯文本。
变量“blogPost”作为 HTML 字符串。我的要求是删除那些 HTML 标签，以便我可以将内容显示为纯文本。但是使用您提到的解决方案，它会将文本呈现为富文本。上面的答案（使用管道剥离 HTML 标签以获得纯文本）对我来说是可行的解决方案。