用javascript和DOM进行网址解析

问题描述

| 我正在编写一个支持聊天应用程序，我希望在其中解析文本以获取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。在第一个令牌中，因为并非所有网址都以protocol：//开头。但是，当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;
    }
}

要获取\“ linkified \”字符串以正确呈现HTML，我必须使用element的非标准.innerHTML属性。我希望有一种方法可以将字符串解析为标记-文本标记和锚定标记-并调用createTextNode或createElement（\“ a \”）并将其与DOM缝合在一起。 因此问题1是我应该如何进行www.site.com甚至是site.com的解析？ 问题2是如何仅使用DOM才能做到这一点？     

解决方法

您可以做的另一件事是：

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>\';
    }); 
}

这有点像您的解决方案，但是它会检查传递给\“。replace（）\”的回调中的\“ www \” URL。 请注意，您将不会选择\“ stackoverflow.com \”或\“ newegg.com \”或类似的东西，据我所知，这是不可避免的（考虑到您选择的误报，这甚至是可取的向上）。     ,这是我想出的，也许有人做得更好？

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>\"); 
}

第一个正则表达式将用http://www.google.com代替www.google.com，足以满足我的需求。但是，我将推迟将其标记为答案，因为我也想将（www。）设为可选，但是我什么时候要做（www。）？它将每个单词替换为http：// word /