Question

I’m trying to replace text inside an HTML string with Javascript.
The tricky part is that I need to replace the text only if it isn’t inside a tag (meaning it’s not part of an attribute):

var html_str = '<div>hi blah blah<img src="img.jpg" alt="say hi" /><a href="link_hi.php">hi!</a></div>';

In this example, after I do html_str.replace("hi","hello"); I want to replace only the text inside the div and a tags, avoiding the <img alt=".." or the href="....

Some more info:

1. html_str = document.body.innerHTML;, therefore the elements are unknown. The example above is only an example.
2. Regex are more than welcome.
3. The hi and hello values are inside varaibles, meaning the actual replace is like so: html_str.replace(var1,var2);

The REAL code is this:

var html_str = document.body.innerHTML;
var replaced_txt = "hi";
var replace_with = "hello";
var replaced_html = html_str.replace(replaced_txt,replace_with);

I hope I explained myself well.
Thanks in advance.

Answer 1

This maybe?

var obj = {'hi':'hello','o':'*','e':'3','ht':'HT','javascrpit':'js','ask':'ASK','welcome':'what\'s up'}; // This may contain a lot more data

(function helper(parent, replacements) {
  [].slice.call(parent.childNodes, 0).forEach(function (child) {
    if (child.nodeType == Node.TEXT_NODE) {
      for (var from in replacements) {
        child.nodeValue = child.nodeValue.replace(from, replacements[from]);
      }
    }
    else {
      helper(child, replacements);
    }
  });
}(document.body, obj));

http://jsfiddle.net/G8fYq/4/ (uses document.body directly)

If you want to make the changes visible immediately then you could also pass document.body and forget about the whole container stuff.

Update to allow for multiple replacements in one run.

---

You could also try XPath in javascript, though the following solution will not work in IE.

var
  replacements = {'hi':'hello','o':'*','e':'3','ht':'HT','javascrpit':'js','ask':'ASK','welcome':'what\'s up'},
  elements = document.evaluate('//text()', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null),
  i = 0,
  textNode, from;

for (; i < elements.snapshotLength; i += 1) {
  textNode = elements.snapshotItem(i);

  for (from in replacements) {
    if (replacements.hasOwnProperty(from)) {
      textNode.nodeValue = textNode.nodeValue.replace(from, replacements[from]);
    }
  }
}