用Javascript中的HTML文本替换textNode？答案

【问题标题】：Replace a textNode with HTML text in Javascript?用Javascript中的HTML文本替换textNode？
【发布时间】：2013-03-11 07:15:36
【问题描述】：

我被引导到 GitHub (https://github.com/cowboy/javascript-linkify) 上的 Linkify 项目，以查找和“链接”仅在文本中浮动的 URL 和域。

太棒了！它完全适用于文本！

但是，我不太确定如何使其在具有我想要链接的文本的 textNode 上工作。

我知道textNode 只有textContent，因为.. 都是文本。由于这个 Linkify 函数将 HTML 作为文本返回，有没有办法获取一个 textNode 并使用 Linkify 输出“重写”其中的 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);
    }
  }
}

【问题讨论】：

你的示例代码太乱了，我什至不知道从哪里开始！你能把它清理一下，然后有一个普通的例子，还有你想要的 textNode 吗？
jsfiddle.net/AMhRK/4
@ryan 它很接近，但你看到它破坏了已经正确超链接的 URL。
@HanletEscaño 这是一个“清理过的”小提琴jsfiddle.net/AMhRK/6
@Jippers 你试过 ryan 的 jsFiddle 吗？它确实有效。

标签： javascript html textnode

【解决方案1】：

您需要将 textNode 替换为 HTML 元素，例如 span，然后将链接文本设置为该元素的 innerHTML。

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

【讨论】：

不是那么简单，一个文本节点可能包含很多“未链接”的元素
这似乎有效！这是一个带有 Will Scott 的 Fiddle 叉子：jsfiddle.net/H2aHH
这会维护用户的Selection，而.replaceChild() 不会！辉煌
var replacementNode = document.createElement('span'); var newHtml = linkify(n.textContent); n.parentNode.insertBefore(replacementNode, n); n.parentNode.removeChild(n); replacementNode.outerHTML = newHtml;
@Gromo 我喜欢你的解决方案，因为它最终不会留下新的span 元素。

【解决方案2】：

除了之前的答案，我提出了更短的方法（基于 jQuery）：

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

其中n - 是文本节点。

或者native version

var txt = document.createElement("span");
txt.innerHTML = "Some text with <b>html</b> support";
node.replaceWith(txt);

node 是文本节点

【讨论】：

replaceWith() 在现代浏览器（Chrome 和 Firefox；Edge 正在开发中）上以 vanilla JavaScript 的形式提供。
但是在原版中没有 HTML 支持。标签仅显示为文本。