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;

我确实发现正则表达式声称可以解决此问题，但将其插入正则表达式中：http://alpha.jsfiddle.net/gTpWv/1/ 不返回任何内容。

我还发现遵循 这个 过程的想法很有趣，但我会留下两行单独的行，一行带有链接，另一行带有链接使用表情符号，需要另一个正则表达式才能将一个表情符号注入另一个表情符号。

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

Answer 1

问题是 :/ 会被捕获在不该捕获的地方。每次 K 在替换过程中发生变化时，它都会被输入一些包含邪恶种子的 http:// 字符串... :/< /code>位。在下一次迭代中，这些将被替换为相应的 笑脸，从而破坏存储在 K。

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

我们首先将每个网址和表情符号更改为中间形式。要使用示例字符串“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 将包含Testing {{_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)
});

希望它有帮助！