javascript - 使用 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);
    };
}])

我正在向它注入(inject)早期创建的 htmlEscape 过滤器，并使用 $sce.trustAsHtml 方法返回适合与 ng-bind-html< 一起使用的值 指令。

最后我像这样在部分模板中调用这个过滤器:

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

结果如下: