Question

我想找到与整页的regexp匹配的特定内容，然后需要替换为另一个文本。这是我使用的代码。

 var reg = /exam+ple/;
    $("body").html(function () {
        return $(this).html().replace(reg, "exammmmmmmmple"); 
    });

  // html
  <body>
     This is some example text<br/>
     exammmple.com
     <a href="http://example.com"> Visit a site </a>
     <div id="example"> Here is some other text</div>
  </body>

我使用的代码有效，但有一个问题是它无法替换href和id内的内容。我希望在regExp匹配的地方进行更改。

还有另一个问题，这个代码很慢，因为首先你采取全身内容，然后你对它进行更改，然后再次在体内插入内容，有没有其他方法来加快它？

Answer 1

使用global modifier(g)和正则表达式替换所有匹配项。

var reg = /exam+ple/g;
$("body").html(function(_, htm) {
  return htm.replace(reg, "exammmmmmmmple");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  This is some example text<br/> exammmple.com
  <a href="http://example.com"> Visit a site </a>
  <div id="example"> Here is some other text</div>
</body>

HTTP/1.1 301 Moved Permanently
Location: http://www.example.org/index.asp

仅供参考：更新整个HTML是一个糟糕的主意，因为重新创建了所有元素，并且会因为重新创建元素而破坏所有附加的事件处理程序。

Answer 2

您可以通过节点进行迭代。一种方法是使用nodeIterator。这方面的示例可能如下所示。

修改

（因为您不仅要替换文字）

使用此解决方案，它不会比更改currentNode的每个属性更好。我调整了下面的代码片段以更改属性href。您可以随时迭代所有属性 - 例如，如果您想要全部更改它们。

建议

我强烈建议您查看

节点/元素之间的区别。
https://developer.mozilla.org/en-US/docs/Web/API/Node
https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator

为您的用例优化剪切。

使用节点

的技巧

在Chrome的开发者工具中，您可以转到Elements标签，右键单击要查看其属性的元素，然后点击copy -> Copy selector。现在转到Sources标签。在右侧，您会看到Watch部分。打开它并将以下代码段放在那里：

document.querySelector('PASTE YOU SELECTOR HERE');

示例代码段

let currentNode;
const nodeIterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ALL);

while(currentNode = nodeIterator.nextNode()) {
  if(currentNode.nodeType == Node.ELEMENT_NODE && currentNode.attributes.href) {
    currentNode.attributes.href = currentNode.attributes.href.replace(/someText/g, 'foo');
  }
  if(currentNode.nodeType == Node.TEXT_NODE) {
    currentNode.nodeValue = currentNode.nodeValue.replace(/someText/g, 'foo');
  }
}

替换jQuery中与RegExp匹配的内容

2 个答案:

修改

建议

使用节点

示例代码段