讓輸入的連結字串自動可以點選跳轉程式碼

admin發表於2017-03-19
字串

如果在div中設定一段字串的時候，可能裡面存在的連結地址，但是這些預設狀態下都會當做普通的字串被處理，也就是說不能夠點選跳轉效果，但是有時候為了方便，或者其他原因，往往需要讓這個連結字串能夠實現點選跳轉，下面就是一段能夠實現此功能，下面通過一段程式碼例項進行一下分享，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
</head>  
<script type="text/javascript">  
String.prototype.autoAdd=function(){ 
  var reg=/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; 
  return this.replace(reg,'<a href="$1$2">$1$2</a>'); 
}; 
window.onload=function() 
{ 
  var thediv=document.getElementById("thediv"); 
  thediv.innerHTML=thediv.innerHTML.autoAdd(); 
} 
</script>  
<body>  
<div id="thediv">螞蟻部落的網址是<a href="http://www.softwhy.com" target="_blank">http://www.softwhy.com</a></div> 
</body>  
</html>

以上程式碼實現了我們的要求，div中的連結字串可以實現點選跳轉效果。

相關文章