JavaScript - замена текста не в атрибутах

Question

Я пытаюсь заменить текст внутри строки HTML на Javascript.Сложность в том, что мне нужно заменить текст только в том случае, если он не находится внутри тега (то есть он не является частью атрибута):

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

В этом примере после выполнения html_str.replace("hi","hello"); Iхотите заменить только текст внутри тегов div и a, избегая <img alt=".." или href="....

Дополнительная информация:

1. html_str = document.body.innerHTML;поэтому элементы неизвестны.Приведенный выше пример является только примером.
2. Regex более чем приветствуются.
3. Значения hi и hello находятся внутри переменных, что означает фактическую замену следующим образом: html_str.replace(var1,var2);

РЕАЛЬНЫЙ код такой:

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

Надеюсь, я все хорошо объяснил.Заранее спасибо.

Answer 1

Это может быть?

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/ ( напрямую использует document.body )

Если вы хотите, чтобы изменения были видны сразу же, тогдаВы также можете пропустить document.body и забыть обо всем материале container.

Обновление, позволяющее выполнять несколько замен за один прогон.

---

Вы можететакже попробуйте XPath в javascript, хотя следующее решение не будет работать в 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]);
    }
  }
}

Answer 2

На самом деле можно использовать это простое регулярное выражение с отрицательным прогнозом:

(?![^<>]*>)

Просто добавьте его в шаблон соответствия, и он исключит любое содержимое в качестве атрибутов в тегах. Вот пример: Регулярное выражение Javascript: Найти все URL-адреса вне тегов - Вложенные теги

Answer 3

Вы можете попробовать это, но регулярные выражения и HTML не являются друзьями:

var str = '<div>hi blah blah<img src="img.jpg" alt="say hi" /><a href="link_hi.php">hi!</a></div>',
    rx = new RegExp('(\>[^\>]*)' + 'hi' + '([^\>=]*\<)', 'g');

str = str.replace(rx, '$1hello$2');