URL-разбор в JavaScript и DOM - PullRequest
Новая
       21

URL-разбор в JavaScript и DOM

0 голосов
/ 25 мая 2011

Я пишу приложение поддержки чата, где я хочу, чтобы текст анализировался на URL. Я нашел ответы на похожие вопросы, но ничего на следующее.

что у меня есть 

function ReplaceUrlToAnchors(text) {
    var exp = /(\b(https?:\/\/|ftp:\/\/|file:\/\/|www.)
              [-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1' target='_blank'>$1</a>"); 
}

этот шаблон является модифицированной версией, которую я нашел в интернете. Включает в себя www. в первом токене, потому что не все URL начинаются с протокола: // Однако, когда www.google.com заменяется на 

<a href='www.google.com' target='_blank'>www.google.com</a>

, который подтягивает MySite.com/webchat/wwww.google.com, и я получаю 404

это моя первая проблема, моя вторая ...

в моем скрипте для генерации сообщений в журнал я вынужден сделать это хакерским способом: 

var last = 0;
function UpdateChatWindow(msgArray) {

    var chat = $get("MessageLog");
    for (var i = 0; i < msgArray.length; i++) {
        var element = document.createElement("div");
        var linkified = ReplaceUrlToAnchors(msgArray[i]);
        element.setAttribute("id", last.toString());
        element.innerHTML = linkified;
        chat.appendChild(element);
        last = last + 1;
    }
}

Чтобы получить строку со ссылками для корректного отображения HTML, я должен использовать нестандартный атрибут .innerHTML элемента. Я бы предпочел способ, которым я мог бы анализировать строку как токены - текстовые токены и токены привязки - и вызывать либо createTextNode или createElement ("a") и сшивать их вместе с DOM.

Итак, вопрос 1: как мне разбирать www.site.com или даже site.com? и вопрос 2: как бы я мог сделать это, используя только DOM?

Ответы [ 2 ]

1 голос
/ 25 мая 2011

Еще одна вещь, которую вы могли бы сделать, это: 

function ReplaceUrlToAnchors(text) {
    var exp = /(\b(https?:\/\/|ftp:\/\/|file:\/\/|www.)
              [-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp, function(_, url) {
      return '<a href="' +
        (/^www\./.test(url) ? "http://" + url : url) +
        'target="_blank">' +
        url +
        '</a>';
    }); 
}

Это похоже на ваше решение, но оно проверяет URL-адреса "www" в обратном вызове, передаваемом в ".replace ()".

Обратите внимание, что вы не будете поднимать "stackoverflow.com" или "newegg.com" или что-либо подобное, что, как я понимаю, может быть неизбежным (и даже желательным, учитывая ложные срабатывания, которые вы бы подобрали).

0 голосов
/ 25 мая 2011

Вот то, что я придумал, может быть, у кого-то есть что-то лучше? 

function replaceUrlToAnchors(text) {
    var naked = /(\b(www.)[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|](.com|.net|.org|.co.uk|.ca|.))/ig;
    text = text.replace(naked, "http://$1");

    var exp = /(\b(https?:\/\/|ftp:\/\/|file:\/\/)([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]))/ig;
    return text.replace(exp,"<a href='$1' target='_blank'>$3</a>"); 
}

первое регулярное выражение заменит www.google.com на http://www.google.com и достаточно для того, что яделаю.Однако я не буду помечать это как ответ, потому что я также хотел бы сделать (www.) Необязательным, но когда я сделаю (www.)?оно заменяет каждое слово на http://word/

...