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过程有趣的想法，但我会留下两条分开的线，一个带有链接，另一个带有表情符号，并且需要另一个正则表达式才能将一个注入另一个。

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

Answer 1

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

我的方法是做一个2阶段的搜索和替换。在这里看到它的行动http://alpha.jsfiddle.net/gTpWv/7/，并阅读进一步的解释。

我们首先将每个url和smilie改为中间形式。要使用你的榜样字符串"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_}}。我希望很明显，这些{{}}字符串是前面提到的网址和表情符号的中间形式。这些字符串的实际值存储在名为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) 
}); 

希望它能帮助！