Replace a textNode with HTML text in Javascript?

Question

I was directed to the Linkify project on GitHub (https://github.com/cowboy/javascript-linkify) for finding and "linkifying" URLs and domains just floating in text.

It's awesome! It totally works on text!

However, I'm not quite sure how to make it work on a textNode which has the text I want to Linkify.

I understand the textNode only has textContent since.. it's all text. Since this Linkify function returns HTML as text, is there a way to take a textNode and "rewrite" the HTML within it with the Linkify output?

I've been playing with it on JSFiddle here: 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);
    }
  }
}

Your example code is so messy and so much, I don't even know where to begin! Can you clean it up a little bit, and just have a normal example, and the one you want with textNode? — Hanlet Escaño, Mar 21 '13 at 16:50
@ryan it's close but you see it mangles the already properly hyperlinked URLs. — Jippers, Mar 21 '13 at 17:28
@HanletEscaño here's a "cleaned up" fiddle http://jsfiddle.net/AMhRK/6/ — Jippers, Mar 21 '13 at 17:39
@HanletEscaño If you look at the output, the hyperlinks that were already in the page are now wrecked. The first twitter link for example. — Jippers, Mar 21 '13 at 17:45
@HanletEscaño same thing. The first hyperlink Go To Twitter is no longer a link. — Jippers, Mar 21 '13 at 17:54

score 31 · Accepted Answer · answered Mar 21 '13 at 17:11

31

You'll need to replace the textNode with an HTML element, like a span, and then set your linkified-text as that element's innerHTML.

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

answered Mar 21 '13 at 17:11

Will Scott

546
5
6

3

It's not that simple as a text node may contain a lot of "unlinkfied" elements – Rodrigo Siqueira Mar 21 '13 at 17:12
This seems to work! Here's a Fiddle fork with Will Scott's addition: http://jsfiddle.net/H2aHH/ – Jippers Mar 21 '13 at 18:18
this maintains the user's `Selection`, where `.replaceChild()` does not!! brilliant – neaumusic May 17 '16 at 00:55
1

var replacementNode = document.createElement('span'); var newHtml = linkify(n.textContent); n.parentNode.insertBefore(replacementNode, n); n.parentNode.removeChild(n); replacementNode.outerHTML = newHtml; – Gromo Mar 15 '19 at 11:04
@Gromo I like your solution since it doesn't end up leaving new `span` elements around. – Gabriel Luci Jun 03 '19 at 16:02
@neaumusic it does not retain the selection (at least not in 2023) – vdegenne Jan 20 '23 at 17:23

score 11 · Answer 2 · edited Aug 05 '19 at 19:22

11

Additionally to previous answer I propose more short way (based on jQuery):

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

where n - is textNode.

Or the native version

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

where node is the textNode

edited Aug 05 '19 at 19:22

driconmax

956
1
18
32

answered Feb 02 '17 at 17:11

IStranger

1,868
15
23

1

`replaceWith()` is available as [vanilla JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith) on modern browsers (Chrome and Firefox; Edge is under development). – Franklin Yu Oct 31 '17 at 18:20
8

But in the vanilla version there is no HTML support. Tags just appear as text. – Kokodoko Dec 14 '18 at 13:02

score 5 · Answer 3 · answered May 21 '22 at 08:28

Build on @AlexJeffcott's answer: Perf optimized version utilizing DocumentFragment instead of messing around with <span>, innerHTML and childNodes

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

score 1 · Answer 4 · answered Apr 04 '22 at 10:56

Build on Will Scott's accepted answer, if you do not wish to have to wrap everything in a span, you could do the following:

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

Replace a textNode with HTML text in Javascript?

4 Answers4

Linked