使鏈接在Javascript中可點擊嗎？

Question

是否有轉向從

Then go to http:/example.com/ and foo the bar! 

字符串的簡單方式進入

Then go to <a href="http://example.com">example.com</a> and foo the bar! 

在Javascript

現有的HTML頁面中？

Answer 1

是的。最簡單的方法是使用正則表達式替換鏈接等價物的鏈接。像這樣的：

node.innerHTML = node.innerHTML.replace(/(http:\/\/[^\s]+)/g, "<a href='$1'>$1</a>") 

（我RegEx有點生疏，所以你可能需要玩的語法）。這只是一個簡單的例子。你需要警惕腳本注入（例如，如果我有http://"><script>doevil()</script>）。解決方法之一是通過使用鏈接的建築功能：

node.innerHTML = node.innerHTML.replace(/ ... /g, buildLink($1)); 

哪裏buildLink()可以檢查以確保URL不包含任何惡意。

但是，RegEx-innerHTML方法在大型文本主體上不能很好地執行，因爲它撕下並重建節點的整個HTML內容。您可以使用DOM方法，以及實現這一目標：

• 查找參考文本節點
• 在內容上，找到啓動和URL
• 使用splitText()方法的結束索引節點分爲3個：之前，鏈接，
後
• 創建與href這是一樣的鏈接
• 使用insertBefore()鏈接之前插入此<a>節點<a>節點
• 使用appendChild()移動鏈接到<a>節點

Answer 2

首先，「在HTML頁中」是困難的，因爲「頁」實際上是一個DOM樹（這部分由文本節點和主要組成HTML元素）。

解決這個問題最簡單的方法就是定位內容豐富的文本節點。對於每一個文本節點，應用這樣的事情：

// we'll assume this is the string of a content-rich text node 
var textNode = document.getElementById('contentNode'); 
textNode.innerHTML = textNode.innerHTML.replace(/(\s)(http:\/\/[^\s]+)(\s)/g, '$1<a href="$2">$2</a>$3'); 

BTW：這裏有安全隱患。如果您從未經消毒的文本生成鏈接，則可能存在XSS。