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？

不管出于什么我看来是值得：有没有点都在担心“的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”的网址“。更换（）”。

请注意，您将不会捡到“*.com”或“newegg.com”或类似的东西，我知道这可能是不可避免的（甚至是可取的，鉴于您会选择误报）。

我喜欢这样，我没有意识到你可以给替换回调。 – 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/

Url在JavaScript和DOM中的解析

相关推荐