使用AngularJS将多行纯文本转换为HTML段落

Question

我从后端收到多行纯文本。

例如：

Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit.

Nunc porta velit ut nunc pretium, quis auctor nunc placerat.
In quis porta neque.
Fusce dapibus faucibus mi ut egestas.

<p>Phasellus egestas magna posuere, bibendum dui quis, lacinia nisl.</p>

我想用AngularJS作为HTML段落来渲染它。

所以这个例子将成为：

<p>Lorem ipsum dolor sit amet, &lt;strong&gt;consectetur&lt;/strong&gt; adipiscing elit.</p>

<p>Nunc porta velit ut nunc pretium, quis auctor nunc placerat.
In quis porta neque.
Fusce dapibus faucibus mi ut egestas.</p>

<p>&lt;p&gt;Phasellus egestas magna posuere, bibendum dui quis, lacinia nisl.&lt;/p&gt;</p>

请注意，初始纯文本中存在的所有HTML代码都必须安全转义（包括现有的<p>），因此我不能只应用我的过滤器并在之后进行转义。

我认为这是一个3步骤的过程：

1. 在初始文本中转义HTML包含。
2. 应用过滤器将多行文字分解为段落。
3. 输出文字而不进一步转义。

但我不确定实施每个步骤的最佳方法是什么。

你能指导我使用正确的方法向量吗？谢谢！

Answer 1

我想我终于解决了这个问题。我希望这个答案会对某人有所帮助。

正如我之前提到的，这是一个分为3个步骤的过程。

1. 在初始文本中转义HTML包含。
2. 应用过滤器将多行文字分解为段落。
3. 输出文字而不进一步转义。

第一步我试图找到一些现有的函数来逃避初始文本，但无济于事。似乎AngularJS没有暴露任何这样做的方法（如果我错了，请纠正我）。最后，我创建了自己的过滤器来转义HTML：

myModule.filter('htmlEscape', function() {
    return function(input) {
        if (!input) {
            return '';
        }
        return input.
            replace(/&/g, '&').
            replace(/</g, '&lt;').
            replace(/>/g, '&gt;').
            replace(/'/g, '&#39;').
            replace(/"/g, '&quot;')
        ;
    };
});

然后我创建了一个过滤器，将纯文本分成段落：

myModule.filter('textToHtml', ['$sce', 'htmlEscapeFilter', function($sce, htmlEscapeFilter) {
    return function(input) {
        if (!input) {
            return '';
        }
        input = htmlEscapeFilter(input);

        var output = '';
        $.each(input.split("\n\n"), function(key, paragraph) {
            output += '<p>' + paragraph + '</p>';
        });

        return $sce.trustAsHtml(output);
    };
}])

我将早期创建的htmlEscape过滤器注入其中并使用$sce.trustAsHtml方法返回适合与ng-bind-html指令一起使用的值。

最后，我在部分模板中调用此过滤器，如下所示：

<div ng-bind-html="someText|textToHtml"></div>

结果如下：

Answer 2

我会考虑在Angular API中使用ng-sanitze模块。我认为这应该涵盖你正在寻找的东西。

$sanitize