Replace a textNode with HTML text in Javascript?

I was directed to the Linkify project on GitHub ( 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:

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);



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);

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";

where node is the textNode


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.