用新的HTML内容替换单词的每次出现

Question

I'm trying to replace every occurrence of a word with a new HTML content. I have tried this:

function walk(node) {      
    var child, next;
    switch ( node.nodeType )  {
        case 1:  // Element
        case 9:  // Document
        case 11: // Document fragment
            child = node.firstChild;
            while ( child ) {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;
        case 3: // Text node
            handleText(node);
            break;
    }
}

function handleText(textNode) {
    var v = textNode.nodeValue;
    var replacement = "<h1>foo</h1>";
    v = v.replace(/toReplace/g, replacement);        
    textNode.nodeValue = v;
}

walk(document.body);

What I want is to replace all toReplace text with new actual HTML content (a foo in h1) but it just literally prints put <h1>foo</h1>

Fiddle: http://jsfiddle.net/7zkY8/

How can I fix it?

Answer 1

Just simply replace the document.body.innerHTML , the browser will parse the text and reconstruct the DOM

var replacement = "<h1>foo</h1>";
document.body.innerHTML = document.body.innerHTML.replace(/toReplace/g,replacement);

DEMO

Answer 2

This is how I did it

function handleText(textNode) {
    if (textNode.nodeValue.match(/toReplace/)) {
        var parent = textNode.parentNode;
        var replacement = "<h1>foo</h1>";  
        textNode.nodeValue = textNode.nodeValue.replace(/toReplace/g, replacement);
        var newSpan = document.createElement('span');
        newSpan.innerHTML = textNode.nodeValue;
        parent.replaceChild(newSpan, textNode);
    }
}