JavaScript将纯文本转换为链接＆amp;＆amp;表情符号

Question

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

这两种方法都是分开工作的，但是一旦smilies的regexp得到原始的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程序，但我会留下两个单独的行，一个有链接，一个有表情符号，需要另一个正则表达式将一个注入另一个。< / p>

我不确定是否应该使用更好的正则表达式，或者尝试找到解决此问题的其他方法。

Answer 1

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

我的方法是进行两阶段搜索和替换。请在此处查看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将包含测试{{___1_}} {{_s_1_}}，{{_s_2_}} {{_s_3 _}} 。我希望很明显，这些{{}}字符串是前面提到的网址和表情符号的中间形式。这些字符串的实际值存储在名为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)
});

希望它有所帮助！