7

我创建了一个 AngularJS 过滤器来自动从数据中找到的地址创建可点击的链接。过滤器：

app.filter('parseUrl', function() {
    var  //URLs starting with http://, https://, or ftp://
        replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim,
        //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
        replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim,
        //Change email addresses to mailto:: links.
        replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;

        return function(text, target, otherProp) {        
            angular.forEach(text.match(replacePattern1), function(url) {
                text = text.replace(replacePattern1, "<a href=\"$1\" target=\"_blank\">$1</a>");
            });
            angular.forEach(text.match(replacePattern2), function(url) {
                text = text.replace(replacePattern2, "$1<a href=\"http://$2\" target=\"_blank\">$2</a>");
            });
            angular.forEach(text.match(replacePattern3), function(url) {
                text = text.replace(replacePattern3, "<a href=\"mailto:$1\">$1</a>");
            });

            return text;        
        };
    });

这就是我如何称呼它（在一段内）：

<p><strong>Details:</strong> {{event.description | parseUrl}}</p>

这可以正确地用链接代码替换纯文本链接。但是，它用纯文本形式的链接替换它。例如，www.google.com将被替换为&lt;a href="http://www.google.com" target="_blank"&gt;http://google.com&lt;/a&gt;. 这显然不会产生可点击的链接，这是我的目标。

我不确定为什么会这样。关于如何预防/修复它的任何想法？谢谢。

4

3 回答 3

7

尝试使用ngBindHtmlUnsafe指令将过滤器生成的 HTML 应用为元素的实际 innerHTML 内容，如下所示：

<span ng-bind-html-unsafe="event.description | parseUrl"></span>
于 2013-07-10T01:51:04.343 回答
2

您需要使用：

使用表达式输出字符串将转义您传递给它的任何 html 实体（符号，例如 < > &）

于 2013-07-10T01:51:29.920 回答
1

我使用这个过滤器有一段时间了，不知何故没有注意到它产生的灾难性结果。我的修改版本在这里：

filter('parseUrl', function($sce) {
var  //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim,
    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim,
    //Change email addresses to mailto:: links.
    replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;

    return function(text, target, otherProp) {        
        text = (text + '').replace(/>/,"&gt;").replace(/</,"&lt;");
        text = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2');
        text = text.replace(replacePattern1, "<a href=\"$1\" target=\"_blank\">$1</a>");
        text = text.replace(replacePattern2, "<a href=\"http://$2\" target=\"_blank\">$2</a>");
        text = text.replace(replacePattern3, "<a href=\"mailto:$1\">$1</a>");
        return $sce.trustAsHtml(text);
    };
});

请注意，它没有使用 angular.forEach！（？？？？？？）输出会弹道。大概这个问题与有多个匹配项有关！

于 2014-12-11T20:52:20.300 回答