如何在Angularjs中一起使用nl2br和linky过滤器？答案

【问题标题】：How to use nl2br and linky filter together in Angularjs?如何在Angularjs中一起使用nl2br和linky过滤器？
【发布时间】：2015-03-21 07:14:21
【问题描述】：

我正在尝试使用以下多个过滤器，

<p><span ng-bind-html="someVar | nl2br | linky"></span></p>

什么都不渲染。但是，当我如下更改过滤器的顺序时

<p><span ng-bind-html="someVar | linky | nl2br"></span></p>

linky 有效，但 nl2br 无法将换行符转换为 br。

nl2br 可以使用以下实现：

.filter('nl2br', function($sce) {
  return function(input) {
    return $sce.trustAsHtml( input.replace(/\n/g, '<br>') );
  }
}

【问题讨论】：

nl2br 过滤器参考代码pastebin.com/1TsdF0V6
$sce.trustAsHtml 不返回字符串，linky 需要一个。
我提出这个问题是为了赏金，因为这是一个常见但出乎意料的复杂问题，它会教你一些你一开始不想知道的东西。我知道将用户输入的 HTML 视为不受信任的处理很重要，但是将 $sce 与简单的两个过滤器链一起使用的复杂性让我大吃一惊。

标签： angularjs nl2br

【解决方案1】：

所以我能够使用 someVar | linky | nl2br 让它工作。问题出在链接过滤器上。 ngSanitize 的链接过滤器将 \r 和 \n 分别更改为 &#10; 和 &#13;。鉴于 nl2br 过滤器无法捕捉到这些。

感谢这个要点https://gist.github.com/kensnyder/49136af39457445e5982，修改nl2br如下

angular.module('myModule')
.filter('nl2br', ['$sanitize', function($sanitize) {
    var tag = (/xhtml/i).test(document.doctype) ? '<br />' : '<br>';
    return function(msg) {
        // ngSanitize's linky filter changes \r and \n to &#10; and &#13; respectively
        msg = (msg + '').replace(/(\r\n|\n\r|\r|\n|&#10;&#13;|&#13;&#10;|&#10;|&#13;)/g, tag + '$1');
        return $sanitize(msg);
    };
}]);

工作小提琴http://jsfiddle.net/fxpu89be/4/

但是，它仍然没有解决原来逆序使用的问题，即someVar | nl2br | linky

【讨论】：

我喜欢你清楚天真的解决方案有什么问题以及提供实际有效的简单过滤器的方式。赏金颁发。谢谢！

【解决方案2】：

以 zeroflagL 的评论为基础 - 保持正常，直到结束。

<p><span ng-bind-html="someVar | nl2br | linky | trustMe"></span></p>

删除所有信任 - 以便我们返回一个正常的字符串：

.filter('nl2br', function($sce) {
  return function(input) {
    return input.replace(/\n/g, '<br>');
  }
}

我们要做的最后一件事是增加一些信任：

.filter('trustMe', function($sce) {
  return function(input) {
    return $sce.trustAsHtml( input ) );
  }
}

【讨论】：

感谢您的回答。这种方法有两个问题：首先，作为一个小提示，您有几个语法错误。其次，它不起作用；即使您通过$sce.trustAsHtml 运行输出，您也会得到转义的HTML。请参阅此小提琴以获取证据：jsfiddle.net/jsalonen/fxpu89be/2 - 如果您继续解决这些问题，我很乐意为您提供赏金。