Url在JavaScript和DOM中的解析

我正在寫一個支持聊天應用程序，我希望爲網址解析文本。我找到了類似問題的答案，但對於以下內容沒有任何答案。Url在JavaScript和DOM中的解析

我有什麼

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。在第一個標記，因爲不是所有的網址開頭爲協議：//然而，當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？

來源

2011-05-25 Tom Fobear

不管出於什麼我看來是值得：有沒有點都在擔心「的innerHTML」這裏在2011年 – Pointy 2011-05-25 16:42:45

+1爲，立即解決問題1 ... – 2011-05-25 17:04:06

你可以做的另一件事的每一句話是這樣的：

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

這就是那種，像您的解決方案，但它確實在檢查中通過了該回調「WWW」的網址「。更換（）」。

請注意，您將不會撿到「stackoverflow.com」或「newegg.com」或類似的東西，我知道這可能是不可避免的（甚至是可取的，鑑於您會選擇誤報）。

來源

2011-05-25 17:19:02 Pointy

我喜歡這樣，我沒有意識到你可以給替換回調。 – 2011-05-25 18:45:39

@Tom Fobear是的，它很方便 - 參數列表基本上與您從正則表達式「exec（）」調用返回的數組相同，第一個參數是整個匹配，然後後續參數是「（.. 。）「來自正則表達式的組（如果有的話） – Pointy 2011-05-25 18:48:01

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

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/

來源

2011-05-25 17:10:25

Url在JavaScript和DOM中的解析

回答

相關問題