javascript - 替换不在属性之间的文本

Question

我正在尝试用 Javascript 替换 HTML 字符串中的文本。 棘手的部分是，只有当文本不在标签内时我才需要替换文本(意味着它不是属性的一部分):

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"); 之后我只想替换 div 中的文本和a标签，避免 <img alt=".."或href="... .

更多信息:

1. html_str = document.body.innerHTML; ，因此元素未知。上面的例子只是一个例子。
2. 我们非常欢迎正则表达式。
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 内容。

更新以允许在一次运行中进行多次替换。

<小时/>

您也可以在 JavaScript 中尝试 XPath，但以下解决方案在 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]);
    }
  }
}