使用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