Заменить каждое появление слова новым содержимым HTML

Question

Я пытаюсь заменить каждое появление слова новым содержимым HTML. Я попытался это:

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

То, что я хочу, чтобы заменить все toReplace текст с новым содержанием фактической HTML (а foo в h1), но это только в буквальном смысле печатает ставить <h1>foo</h1>

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

Как я могу это исправить?

Answer 1

Это, как я это сделал

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

Answer 2

Просто замените document.body.innerHTML, браузер будет анализировать текст и реконструировать DOM

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

DEMO