JS innerHTML.replace() behavior

JS innerHTML.replace() behavior

本文关键字：behavior replace innerHTML JS      更新时间：2023-09-26

我试图用Scriptish制作一个JavaScript来替换论坛中令人讨厌的字体。代码本身运行良好，但执行过程也会杀死文本编辑器，这是不应该的。按钮和栏仍然存在，但文本框不见了。使用的正则表达式在那里没有匹配项。

document.body.innerHTML = document.body.innerHTML.replace(/font-family:georgia, serif/g, 'font-family:arial, tahoma');

我试过document.body.innerHTML = document.body.innerHTML;，它什么都不做，只是用自己代替身体。即便如此，编辑也会搞砸。我也试着换成所见即所得编辑器，但即使是那个编辑器也消失了。

我不是该网站的管理员，任何人都可以使用不需要的字体（有些人在每个帖子中都会使用它们）。我只是不想让它们出现在我的屏幕上。

我的猜测是Scriptish干扰了网站的脚本编写，但我该如何验证这一点？

在Pete的提示下，我很快就找到了这个解决方案。这将用您输入的内容覆盖所有用户定义的字体。

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "span[style] { font-family:arial, tahoma !important }";
document.body.appendChild(css);

谢谢你的帮助。

您可以找到所有节点，并在循环中更改或删除字体家族。

var list = document.querySelectorAll("[style]");
for (var i = 0; i < list.length; i++) {
  if (list[i].style.fontFamily.indexOf("Arial") > -1)
    alert("I is Arial!");
}
<span style="font-family: Arial">Blaaa</span>
<span style="font-family: Verdana">Blaaa</span>
<span style="font-family: Tahoma">Blaaa</span>

您不应该使用innerHTML，因为这会破坏文档中的所有绑定。

在JavaScript（IE8+）中，您可以使用document.querySelectorAll（选择器）。这个选择器实际上几乎可以在jQuery和CSS中做任何事情，除了高级的jQuery过滤方法（甚至不能100%确定）。

不管怎样，如果你不想在屏幕上出现奇怪的字体，你可以这样做document.querySelectorAll('[font-family^="serif-"]')-这意味着"查找属性以serif-开头的元素，然后您将获得一个可以操作的节点列表

有关属性选择器的完整文档：请访问此处。

取自MDN

[attr]表示属性名称为attr的元素。

[attr=value]表示属性名称为attr且其值恰好为"value"的元素。

[attr~=value]表示属性名称为attr的元素，该元素的值是一个以空格分隔的单词列表，其中一个单词正是"value"。

[attr|=value]表示属性名称为attr的元素。它的值可以完全是"value"，也可以以"value"开头，紧跟"-"（U+002D）。它可以用于语言子代码匹配。

[attr^=value]表示属性名称为attr且其值以"value"为前缀的元素。

[attr$=value]表示属性名称为attr的元素，其值以"value"作为后缀。

[attr*=value]表示属性名称为attr的元素，其值至少包含一个字符串"value"作为子字符串。

这些选择器在您的情况下应该很有用，将它们与document.querySelectorAll(selector)结合起来，您会玩得很开心；）

编辑

因此，在这里添加一些关于你需要做的事情的额外细节：

  • 使用document.querySelectorAll()使用有问题的字体获取所有元素
  • 使用for构造循环集合中的元素
  • 在循环中，使用element[i].style.fontFamily = 'new-family'替换所有字体

有关更改样式的完整文档，请访问此处

你想做的是首先找到冒犯的元素，例如那些字体令人讨厌的元素。如果它们具有始终包含font-family的内联样式，则这并不困难。

自制程序片段（未经测试）//获取inline[style]属性包含字体家族的元素var烦恼FontElements=文档.querySelectorAll（'[style*="font-family"]'）

//loop all the elements to replace the font
for (var i = 0; i < annoyingFontElements.length; i++) {
    //actually do the replacing
    annoyingFontElements[i].style.fontFamily = 'nice-font'
}
相关文章：