javascript 和 DOM 中的 Url 解析

Question

我正在編寫一個支持聊天應用程序，我希望將文本解析為 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>"); 
}

該模式是我在互聯網上找到的模式的修改版本。 它包括萬維網。 在第一個令牌中，因為不是所有的 url 都以 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;
    }
}

要獲得“鏈接”字符串以正確呈現 HTML，我必須使用元素的 non-standard.innerHTML 屬性。 我更喜歡一種方法是我可以將字符串解析為標記 - 文本標記和錨標記 - 並調用 createTextNode 或 createElement("a") 並將它們與 DOM 拼接在一起。

所以問題1是我應該如何go關於www.site.com解析，甚至site.com？ 問題 2 是我如何僅使用 DOM 來做到這一點？

Answer 1

你可以做的另一件事是：

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”或類似的東西，我理解這可能是不可避免的（甚至是可取的，因為您會選擇誤報）。

Answer 2

這是我想出的，也許有人有更好的東西？

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/替換每個單詞