用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？

回答

相关问题