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://, которые содержат семена зла ... :/ битов.На следующей итерации они будут заменены соответствующими смайликами, что приведет к повреждению сгенерированного HTML-кода, хранящегося в K.

. Мой подход заключался в двухэтапном поиске и замене.Смотрите это в действии здесь 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 будет содержать 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)
});

Надеюсь, это поможет!