Question

我正在尝试使用我正在制作的chrome扩展进行解析，并将一个单词的实例替换为另一个单词。这就是我没有为我工作的东西

function jamify() {
  $("body").html().replace(/James/g,"Jamie");
}

Answer 1

.html()的快速且相当脏的替换有一些缺点。

它实际上将替换整个DOM结构，删除任何事件绑定，如果它们未在层次结构上方的元素上“实时”绑定
它将取代比你预期的更多。你应该对'James'和'Jamie'保持安全，但当'em'想要被命名为'emmy'并且突然某些斜体文本被理顺时，它可能变得很时髦。

更好的方法是仅替换实际文本节点中的字符串，因为jQuery不是（当前）问题上的标记，我认为vanilla javascript是一个合适的选项。

var walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT, {
    acceptNode: function(node) {
      return NodeFilter.FILTER_ACCEPT;
    }
  },
  false
);

while (walker.nextNode()) {
  walker.currentNode.data = walker.currentNode.data.replace(/James/g, 'Jamie');
}

<!--  James  -->
<div data-name="James" class="James">
  James
</div>

此示例仅触摸实际的文本元素，注释和两个属性（data-name和class）都不会被替换，所以它仍然存在安全地使用javascript和/或css引用这些。

Answer 2

我用这种方式显示你必须调用一些函数将html重置为新替换的字符串

注意：这将破坏您在替换之前附加的任何DOM事件

如果你想要

，你可以通过将所有呼叫嵌套到一个来缩短这一点

＆＃13;

function jamify() {
 
  var str = $(".test").html();
  console.log('jamify', str);
  str2 = str.replace(/James/g,"Jamie");
  $(".test").html(str2);
  
  //to simplify it could be done this way too
  //$(".test").html($(".test").html().replace(/James/g,"Jamie"))
}

$(document).ready(function(){
  //alert('ready');
  $('.inner').click(function(){console.log('inner click')})
  //Yea!, my click event is all good.
  jamify();
  //Now all your inner click EVENT is broken so this is not good
  //solution if there are any events attached in your DOM
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <p>James is here</p>
  <div class="inner">this div is James</div>
</div>

＆＃13;

Answer 3

如果单词在textContent中，您可以尝试：

var all = document.querySelectorAll('.test')
//using .test as a wrapper section, try using body in production as selector (in the snippets it breaks)

all.forEach(x => x.textContent = x.textContent.replace(/James/gi, "Jamie"))
// keep in mind forEach for nodes has limited support, tested  in chrome

<div class="test">
  <p>James is here</p>
  <div >this div is James</div>
</div>

用Javascript替换dom中单词的每个实例

3 个答案: