替换 jQuery 中与 RegExp 匹配的内容

Question

我想从整个页面中找到与正则表达式匹配的特定内容，然后需要用其他文本替换。这是我正在使用的代码。

 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;

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>

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

Answer 2

您可以遍历节点。一种方法是使用 nodeIterator。这方面的一个示例可能类似于以下代码段。

编辑

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

使用此解决方案，不会比更改当前节点的每个属性更好。我调整了下面的代码片段以更改属性 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 匹配的内容

Replace Content that match RegExp in jQuery

javascript

jquery

str-replace

编辑

建议

使用节点的技巧

示例片段