Ersetzen Sie einen textNode mit HTML-Text in Javascript?

Ich wurde zum Linkify-Projekt auf GitHub weitergeleitet (https://github.com/cowboy/javascript-linkify) zum Finden und “Verlinken” von URLs und Domains, die einfach im Text schweben.

Es ist toll! Es funktioniert total auf Text!

Allerdings bin ich mir nicht ganz sicher, wie ich es bei a zum Laufen bringen soll textNode die den Text enthält, den ich verlinken möchte.

Ich verstehe die textNode hat nur textContent seit … es ist alles Text. Da diese Linkify-Funktion HTML als Text zurückgibt, gibt es eine Möglichkeit, einen textNode zu nehmen und den darin enthaltenen HTML-Code mit der Linkify-Ausgabe “umzuschreiben”?

Ich habe hier auf JSFiddle damit gespielt: 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);
    }
  }
}

Sie müssen textNode durch ein HTML-Element ersetzen, z. B. eine Spanne, und dann Ihren verknüpften Text als innerHTML dieses Elements festlegen.

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

Zusätzlich zur vorherigen Antwort schlage ich einen kürzeren Weg vor (basierend auf jQuery):

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

Wo n – ist textNode.

Oder der native Version

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

Wo node ist der textNode

Bauen Sie auf der Antwort von @AlexJeffcott auf: Verwendung der perf-optimierten Version DokumentFragment anstatt herumzuspielen <span>innerHTML und childNodes😁

const enhanceNodes = (textNodes) => {
    textNodes.forEach((node) => {
        const oldText = node.textContent;
        const newText = fancyTextTranformation(oldText);
        const fragment = document.createRange().createContextualFragment(newText);
        node.replaceWith(fragment);
    })
}

Aufbauend auf der akzeptierten Antwort von Will Scott können Sie Folgendes tun, wenn Sie nicht alles in eine Spanne packen möchten:

const enhanceNodes = (textNodes) => {
    const renderNode = document.createElement('span');
    textNodes.forEach((node) => {
        const oldText = node.textContent;
        renderNode.innerHTML = fancyTextTranformation(oldText);
        node.replaceWith(...renderNode.childNodes);
    })
}