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