替换属性中不在之间的文本

replacing text not between in attributes

本文关键字：之间 文本 属性 替换      更新时间：2023-09-26

我正在尝试用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. 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);

我希望我能很好地解释自己。提前谢谢。

这可能吗？

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

实际上，可以使用这个简单的regex负前瞻：

(?![^<>]*>)

只需将其添加到匹配模式中，它就会将任何内容作为标记中的属性排除在外。以下是一个示例：Javascript正则表达式：查找<a>标签-嵌套标签

您可以尝试一下，但regexp和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');
相关文章：