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

Question

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

3

我想将一个文本url列表转换为可点击的链接。

<!DOCTYPE html>

<body>  
<script>

// https://dev59.com/k3VD5IYBdhLWcg3wQZQg
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(...) 为空

- rrrfusco

你为什么想要这样做？如果你想要清理URL，你可以考虑使用PHP的DOMDocument，而不是JavaScript。就我个人而言，在页面上很少看到不是实际链接的链接。 - StackSlave

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PSL · Accepted Answer

那是因为你在元素被添加之前尝试访问该元素，所以document.getElementById('test')会返回null。你可以将其包装在window.onload下，或者将脚本添加到html元素之后。

尝试一下：

<script>

// https://dev59.com/k3VD5IYBdhLWcg3wQZQg
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>