Javascript 转义用户生成的聊天信息，但呈现链接

用户输入聊天信息，使用小胡子模板直接呈现到页面。显然，HTML应该转义以防止HTML注入，但是链接应该再次呈现为

我尝试过使用

{{{…}}}

来返回未转义的HTML内容，这意味着链接将被呈现，我需要自己处理HTML转义。有没有一种安全的方法可以做到这一点，而不依赖于我自己编写的半生不熟的解决方案

jQuery.text（）

会很好，但我想它会将

再次呈现为文本

---

我还能在这里做什么？

只是一个想法：您可以构建自己的转义函数

escape : function () {
    return function(val, render) {
        var $s = $(val);
        var $elements = $s.find("*").not("a"); //add other white-listed elements seperated by comma 
        for (var i = $elements.length - 1; i >= 0; i--) {
            var e = $elements[i];
            $(e).replaceWith(e.innerHTML);
        }
        return $s.html();
    }
}

您可以通过以下方式调用该函数：

{{#escape}}{{{YOUR_TEXT}}}{{/escape}}

---

我还没有测试过这个。这个解决方案需要jQuery。上面的代码基于此解决方案：

如果您不想编写自己的转义或解析解决方案，有一个jQuery插件来处理名为的链接。您可以简单地转义消息，然后在客户端解析它们

其工作原理示例：

var text = "<div>Test<br>Test<br>Test http://stackoverflow.com</div>";
$('div').text(text);

// Before: &lt;div&gt;Test&lt;br&gt;Test&lt;br&gt;Test http://stackoverflow.com&lt;/div&gt;

$('div').linkify();

// After: lt;div&gt;Test&lt;br&gt;Test&lt;br&gt;Test <a href="http://stackoverflow.com" class="linkified" target="_blank">http://stackoverflow.com</a>&lt;/div&gt;

var text=“测试
测试
测试http://stackoverflow.com";
$（'div'）。text（text）；
//之前：divTestbrTestbrTesthttp://stackoverflow.com/div
$（'div'）.linkify（）；
//之后：lt；divTestbrTestbrTest/div

尝试先在.text（）中插入，然后使用regexp以.html（）呈现链接。这里你可以看到一个普通的例子：

var a="see formula a<b>c in http://test.com or https://x.com?p=3";

var hold=document.createElement('div');
hold.textContent=a;

hold.innerHTML=hold.innerHTML.replace(
    /(https?:\/\/[-$A-Za-z0-9%_?&.~+\/=]+)/g,
    '<a href="$1">$1</a>'
);

window.addEventListener('load',function(){
    document.body.appendChild(hold);
});

var a=“参见中的公式achttp://test.com 或https://x.com?p=3";
var hold=document.createElement（'div'）；
hold.textContent=a；
hold.innerHTML=hold.innerHTML.replace(
/（https？：\/\/[-$A-Za-z0-9%.~+\/=]+）/g，
''
);
addEventListener（'load'，function（））{
文件.正文.附件（保留）；
});

---

要获得更准确的regexp，您可以看到

如果您最终选择了regex，那么下面的过滤器和regex是我发现的最具攻击性的一个，用于拾取用户将尝试键入的各种URL

这里有一个regexr可以使用它：

（函数（）{
"严格使用",；
有棱角的
.module（'core.filters'）
.filter（'urlToA'，urlToA）；
// --------------------
函数urlToA（）{
返回函数（字符串、noClick）{
（5）以下以下：：//（（（：：（（（：：：（http？？？））以下以下：：：：：////（（：：（（：：：（（（：：：（（：：：（：：[a-zA-Z0--Z0---Z0--10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10-10(一,二十五))(一,二十五))(二)(三)(三)(四)(三)((四)(()((四)))))()((((|（以下简称：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：124; e[CEGR斯图[CEG]e[CeGG政政政政政局]以及，，124：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：\\| c[[[[[[[[[[[[[[[[[[[[[[[KKKKKKKKK或者，，，，，，，，，，，，，，，，，，nopqrstuvxyz]）|（？：name | net | n[acefgilopruz]）|（？：org | om）|（？：pro | p[aefghklmnrstwy]）| qa | r[eouw]| s[abcdeghijklmnortuvyz]|（以下简称：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：[[[电话号码|旅行| t[CDFGHHHJKKKKKHHHHKKKKHHHKKKKHHKKKMTTTTTTTTTTTTVWWWWWWWZ]））u[124; u[124; u[1240[[国家[AKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKGGZZZ[[v]v]v]v]v]v]v]v]v v[v[[该该该[124[1-9][0-9][1-9][1-9][0-9][1-9][1-9][1-9][1-9][1-9][0][1-9][1-9][1-9][1-0][1-5][2[0-4][0-9][0-9][0-1-1][0-9][0-9][0-9][1-9][1-9]。（？：：：[1-5][2-4][0-9]。）[a-zA-Z0-9\；\/\？\：\@&=\\\~-\+\！\*\'（\）\，\\\]）124；（？：\%[a-fA-F0-9]{2}））*）（？：\b\$）/gi；//jshint忽略：行
返回字符串？string.replace（urlPattern，replace）：字符串；
函数替换（url）{
var httpUrl=url.indexOf（'http'）==-1？'http://'+url:url；
if（noClick）{
返回“”；
}
}
};
}
})();

在聊天中使用不同类型的标记（如BBCode或Markdown）对链接有何看法？这是它在各种讨论板上以及此处通常的工作方式。@JacobMiki但这不是关于建立标记的通用语法，只是为了呈现链接。Facebook聊天也不需要。但Facebook聊天不需要我不要求用户使用标签链接。可能我没有正确理解你想做什么。你想让用户输入标签还是像Facebook聊天那样包装链接？你可以在regexp中看到更多的替代方案

(function () {
    'use strict';

    angular
        .module('core.filters')
        .filter('urlToA', urlToA);

    // --------------------

    function urlToA () {
        return function (string, noClick) {
            var urlPattern = /((?:(http|https|Http|Https|rtsp|Rtsp):\/\/(?:(?:[a-zA-Z0-9\$\-\_\.\+\!\*\'\(\)\,\;\?\&\=]|(?:\%[a-fA-F0-9]{2})){1,64}(?:\:(?:[a-zA-Z0-9\$\-\_\.\+\!\*\'\(\)\,\;\?\&\=]|(?:\%[a-fA-F0-9]{2})){1,25})?\@)?)?((?:(?:[a-zA-Z0-9][a-zA-Z0-9\-]{0,64}\.)+(?:(?:aero|arpa|asia|a[cdefgilmnoqrstuwxz])|(?:biz|b[abdefghijmnorstvwyz])|(?:cat|com|coop|c[acdfghiklmnoruvxyz])|d[ejkmoz]|(?:edu|e[cegrstu])|f[ijkmor]|(?:gov|g[abdefghilmnpqrstuwy])|h[kmnrtu]|(?:info|int|i[delmnoqrst])|(?:jobs|j[emop])|k[eghimnrwyz]|l[abcikrstuvy]|(?:mil|mobi|museum|m[acdghklmnopqrstuvwxyz])|(?:name|net|n[acefgilopruz])|(?:org|om)|(?:pro|p[aefghklmnrstwy])|qa|r[eouw]|s[abcdeghijklmnortuvyz]|(?:tel|travel|t[cdfghjklmnoprtvwz])|u[agkmsyz]|v[aceginu]|w[fs]|y[etu]|z[amw]))|(?:(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9])\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[0-9])))(?:\:\d{1,5})?)(\/(?:(?:[a-zA-Z0-9\;\/\?\:\@\&\=\#\~\-\.\+\!\*\'\(\)\,\_])|(?:\%[a-fA-F0-9]{2}))*)?(?:\b|$)/gi; // jshint ignore:line

            return string ? string.replace(urlPattern, replace) : string;

            function replace (url) {
                var httpUrl = url.indexOf('http') === -1 ? 'http://' + url : url;

                if (noClick) {
                    return '<a>' + url + '</a>';
                } else {
                    return '<a href="' + httpUrl + '">' + url + '</a>';
                }
            }
        };
    }

})();