JavaScript将纯文本转换为链接&&表情符号 [英] JavaScript converting plain text to links && smilies

问题描述

工作示例： ，继续阅读以获得进一步的解释。

我们首先将每个网址和笑脸改为中间形式。要使用示例字符串测试www.google.com，：D，^^：/：

  $ each（N.split（\ n），function（K）{
 //第一遍：创建url和smilie地图
 var urlSubstitutions = [ ]; 
 var smilieSubstitutions = []; 
 
 K = K.replace（/ \b（（http：\ / \ /）|（www \。））[ ^] {5，} / g，函数（匹配）{
 var b =匹配; 
 if（b.indexOf（www）== 0）{
b =http： //+ b 
} 
 
 urlSubstitutions.push（{anchor：match，url：b}）; 
返回{{_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 的两个数组中。下一步只是将中间形式解码为格式化版本：

  //第二遍：应用网址和表情符号
 K = K.replace（/ {{_ u_（\d +）_}} / g，函数（匹配，索引）{
 var substitution = urlSubstitutions [parseInt（index）-1]; 
返回'< a href ='+ substitution.url +'target =_ blank>'+ substitution.anchor +< / a>; 
}）; 
 
 K = K.replace（/ {{_ s_（\d +）_}} / g，函数（匹配，索引）{
 var substitution = smilieSubstitutions [parseInt（index） - 1]; 
返回'< img src ='+ substitution.image +'>'; 
}）; 
 
 document.write（K）
}）; 
  

希望有所帮助！

Working example: http://alpha.jsfiddle.net/gTpWv/

Both of the methods work separately, but once regexp for smilies gets raw HTML code to process, things get ugly.

    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;

I did find regexp claiming to solve this issue, but inserting it into the regexp: http://alpha.jsfiddle.net/gTpWv/1/ returns nothing.

I've also found interesting the idea to follow this procedure, but I would be left with two seperate lines, one with links and one with smilies and it would take another regexp to inject one into another.

I'm not sure should I meddle with a better regexp(s) or try to find another way to solve this problem.

解决方案

The problem is that :/ will be caught in places where it shouldn't. Every time K changes during replaces, it is fed with some http:// strings that contain the seeds of evil... the :/ bits. At the next iteration, these will be replaced with the corresponding smilie, corrupting the generated HTML stored in K.

My approach was to do a 2-phase search and replace. See it in action here http://alpha.jsfiddle.net/gTpWv/7/, and read on for further explanation.

We start by changing every url and smilie to intermediate forms. To use your example string "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 + "_}}";
        });
    }

By now, K will contain Testing {{_u_1_}} {{_s_1_}}, {{_s_2_}} {{_s_3_}}. I hope it's clear that these {{}} strings are the aforementioned intermediate forms of urls and smilies. The actual values of these strings are stored in two arrays named urlSubstitutions and smilieSubstitutions. The next step is simply to decode the intermediate forms into their formatted versions:

    // 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)
});

Hope it helps!

这篇关于JavaScript将纯文本转换为链接&&表情符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！