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