使用javascript在html中安全地替换innerHMTL

Safe innerHMTL replace in html using javascript

本文关键字：替换 innerHMTL 安全 javascript html 使用      更新时间：2023-09-26

我正在开发一个小javascript，它会改变某些页面的外观，为此我必须更改HTML的某些部分（这意味着它不能通过CSS更改）。到目前为止，我找到的唯一解决方案是javascript中的函数replace（）。然而，直接更改innerHTML似乎是一个非常不幸的解决方案，尽管这是我所知道的最快的方法。

这是原始的html:

<div data-sigil="touchable" class="_52x6 touchable">
  <a href="/messages/?ref=bookmarks&amp;app_id=217974574879787" class="_5lut _5luu">
    <div class="_52x3">
      <i class="_5i9c img" style="background-image: url(https://static.xx.fbcdn.net/rsrc.php/v2/yH/r/d3XxBNxqXrK.png);"></i>
    </div>
    <div class="_52x7">Messages</div>
    <div class="_55fj hiddenElem">
      <span>0</span>
      <span class="_55fk">new</span>
    </div>
  </a>
</div>

我想更改background-image: url(link);中的link以加载不同的图像，而不是原始图像。然后我想将<div class="_52x7">Messages</div>中的Messages更改为Mail。

问题出在哪里？这些元素没有唯一的ID，因此不可能使用getElementById()来查找它们，如果我在整个html中替换这些字符串，它将破坏页面上的所有链接和脚本。（因为innerHTML的工作方式）

有没有任何可能的方法来替换提到的字符串？（我不能使用jQuery，所有的类在html中都很常见，所以我也不能使用getElementsByClassName（），除非我循环使用所有的类，但这对我来说似乎是一个非常不幸的解决方案）

您的类名只出现一次吗？

即。标记中的i元素是文档中唯一具有类_5i9c的元素吗？

如果是这样，getElementsByClassName就是您所需要的：

getElementsByClassName('_5i9c')[0].style.backgroundImage = 'url(different-image.png)';
getElementsByClassName('_52x7')[0].innerHTML = 'Mail';

=====

更正：

我错过了你最后的细节，你的类名在整个文档中重复分布。

因此，我建议使用以下方法：

var selectedDivs = getElementsByClassName('_52x7');
for (var i = 0; i < selectedDivs.length; i++) {
if (selectedDivs[i].innerHTML === 'Message') {
selectedDivs[i].innerHTML = 'Mail';
}
}
相关文章：