将URL的文本列表转换为可点击的HTML链接

Convert text list of urls into clickable HTML links

本文关键字：HTML 链接 转换 URL 文本 列表      更新时间：2024-03-24

我希望将URL的文本列表转换为可点击的链接。

<!DOCTYPE html>
<body>  
<script>
// http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
function replaceURLWithHTMLLinks(text) {
    var exp = /('b(https?|ftp|file):'/'/[-A-Z0-9+&@#'/%?=~_|!:,.;]*[-A-Z0-9+&@#'/
%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}
var a1 = document.getElementById("test").innerHTML;
var a2 = replaceURLWithHTMLLinks(a1);
document.getElementById("test").innerHTML = a2;
</script>
<div id="test">
http://www.site.com/
http://www.site2.com/
http://www.site3.com/
</div>
</body>
</html>

Firebug返回控制台中的站点列表：

document.getElementById("test").innerHTML;

即：
www.site.com/
www.site2.com/
www.site3.com/

为什么我在下面的行中出现此错误

var a1 = document.getElementById("test").innerHTML;

类型错误：document.getElementById（…）为空

这是因为您试图在添加元素之前访问该元素，所以document.getElementById('test')返回null。您可以将它包装在window.onload下，或者在html元素之后添加脚本。

尝试：

<script>
// http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
function replaceURLWithHTMLLinks(text) {
    var exp = /('b(https?|ftp|file):'/'/[-A-Z0-9+&@#'/%?=~_|!:,.;]*[-A-Z0-9+&@#'/
%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}
window.onload = function(){
  var elm =  document.getElementById("test");
  var modifiedHtml = replaceURLWithHTMLLinks(elm.innerHTML);
  elm.innerHTML = modifiedHtml ;
}
</script>
相关文章：