用Javascript中的HTML文本替換textNode？

我是針對查找和「linkifying」 URL和域名只是在文本浮在GitHub上Linkify項目（https://github.com/cowboy/javascript-linkify）。用Javascript中的HTML文本替換textNode？

這真棒！它完全適用於文本！

不過，我不太清楚如何使其在具有我想Linkify的文本textNode工作。

我明白textNode僅有的textContent因爲..它的所有文本。由於這個Linkify函數將HTML作爲文本返回，有沒有辦法獲取textNode，並用Linkify輸出「重寫」HTML中的HTML？

我一直在玩它的jsfiddle這裏：http://jsfiddle.net/AMhRK/9/

function repl(node) { 

var nodes=node.childNodes; 
for (var i=0, m=nodes.length; i<m; i++) 
{ 
    var n=nodes[i]; 
    if (n.nodeType==n.TEXT_NODE) 
    { 
     // do some swappy text to html here? 
     n.textContent = linkify(n.textContent); 
    } 
    else 
    { 
     repl(n); 
    } 
} 
}

來源

2013-03-21 Jippers

您的示例代碼非常混亂而且太多了，我甚至不知道從哪裏開始！你可以把它清理一下，只是有一個正常的例子，你想用textNode來做一個例子嗎？ – 2013-03-21 16:50:35

http://jsfiddle.net/AMhRK/4/ – Ryan 2013-03-21 17:05:49

@ryan它很接近，但你看到它已經損壞了已經正確的超鏈接的URL。 – Jippers 2013-03-21 17:28:22

你需要有一個HTML元素來代替textNode，像一個跨度，然後設置你的linkified文本作爲元素的innerHTML之中。

var replacementNode = document.createElement('span'); 
replacementNode.innerHTML = linkify(n.textContent); 
n.parentNode.insertBefore(replacementNode, n); 
n.parentNode.removeChild(n);

來源

2013-03-21 17:11:01

這並不是那麼簡單，因爲文本節點可能包含很多「未鏈接」的元素 – 2013-03-21 17:12:43

這似乎工作！下面是Will Scott的一個小叉：http://jsfiddle.net/H2aHH/ – Jippers 2013-03-21 18:18:27

這會維護用戶的'Selection'，其中'.replaceChild（）'不會！輝煌 – neaumusic 2016-05-17 00:55:31

此外，以前面的回答我提出更短的方式（基於jQuery）：

$(n).replaceWith('Some text with <b>html</b> support');

其中n - 是textNode。

來源

2017-02-02 17:11:35 IStranger

'replaceWith（）'可以作爲現代瀏覽器[香草的JavaScript（https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith）（Chrome和Firefox; Edge是下發展）。 – 2017-10-31 18:20:39

用Javascript中的HTML文本替換textNode？

回答

相關問題