JavaScript将纯文本转换为链接&&表情符号

Question

工作示例:http://alpha.jsfiddle.net/gTpWv/

这两种方法都是分开工作的，但是一旦表情符号的正则表达式得到要处理的原始 HTML 代码，事情就会变得很糟糕。

    K = K.replace(/\b((http:\/\/)|(www\.))[^ ]{5,}/g, function (x) {
    var b = x;
    if (b.indexOf("www") == 0) {
        b = "http://" + b
    }
    return '<a href="' + b + '" target="_blank">' + x + "</a>"
// K is now /"Testing <a href="http://www.google.com," target="_blank">http://www.google.com,</a> :D, ^^"/


    for (var d = 0; d < smiliesArray.length; d++) {
        K = K.replace(new RegExp(smiliesArray[d][0], "g"), '<img src="' + smiliesArray[d][1] + '">');
    }
// K is now Testing <a href="http%3Cimg%20src=" http:="" i.imgur.com="" mvk87.gif"="">/www.google.com," target="_blank"&gt;http<img src="http://i.imgur.com/MVk87.gif">/www.google.com,</a> <img src="http%3Cimg%20src=" http:="" i.imgur.com="" mvk87.gif"="">/i.imgur.com/7JJNL.gif"&gt;, <img src="http%3Cimg%20src=" http:="" i.imgur.com="" mvk87.gif"="">/i.imgur.com/vRgA3.gif"&gt;

我确实找到了 regexp claiming to solve this issue ，但将其插入到正则表达式中:http://alpha.jsfiddle.net/gTpWv/1/什么都不返回。

我还发现有趣的想法可以遵循 this程序，但我会留下两行单独的行，一行带有链接，另一行带有表情符号，并且需要另一个正则表达式才能将一个注入(inject)另一个。

我不确定我应该干预更好的正则表达式还是尝试找到另一种方法来解决这个问题。

Answer 1

问题是 :/ 会在不该出现的地方出现。每次 K 在替换期间发生变化时，它都会收到一些包含邪恶种子的 http:// 字符串...... :/ 位。在下一次迭代中，这些将被相应的 替换。笑脸，破坏存储在 K 中的生成的 HTML。

我的方法是进行两阶段搜索和替换。在此处查看实际效果 http://alpha.jsfiddle.net/gTpWv/7/ ，并继续阅读以获得进一步的解释。

我们首先将每个 url 和笑脸更改为中间形式。要使用您的示例字符串 "Testing www.google.com, :D, ^^ :/":

$each(N.split("\n"), function(K) {
    // First pass: creating url and smilie maps
    var urlSubstitutions = [];
    var smilieSubstitutions = [];

    K = K.replace(/\b((http:\/\/)|(www\.))[^ ]{5,}/g, function(match) {
        var b = match;
        if (b.indexOf("www") == 0) {
            b = "http://" + b
        }

        urlSubstitutions.push({ anchor: match, url: b });
        return "{{_u_" + urlSubstitutions.length + "_}}";
    });

    for (var d = 0; d < smiliesArray.length; d++) {
        K = K.replace(new RegExp(smiliesArray[d][0], "g"), function(x){
            smilieSubstitutions.push({ smilie: x, image: smiliesArray[d][1] });
            return "{{_s_" + smilieSubstitutions.length + "_}}";
        });
    }

现在，K 将包含测试{{_u_1_}} {{_s_1_}}、{{_s_2_}} {{_s_3_}}。我希望很清楚这些 {{}} 字符串是上述 url 和表情符号的中间形式。这些字符串的实际值存储在两个名为 urlSubstitutions 和 smilieSubstitutions 的数组中。下一步就是简单地将中间形式解码成它们的格式化版本:

    // Second pass: applying urls and smilies
    K = K.replace(/{{_u_(\d+)_}}/g, function(match, index) {
        var substitution = urlSubstitutions[parseInt(index)-1];
        return '<a href="' + substitution.url + '" target="_blank">' + substitution.anchor + "</a>";
    });

    K = K.replace(/{{_s_(\d+)_}}/g, function(match, index) {
        var substitution = smilieSubstitutions[parseInt(index)-1];
        return '<img src="' + substitution.image + '">';
    });

    document.write(K)
});

希望对您有所帮助!