JS innerHTML.replace()行为

Question

我试着用Scriptish制作一个JavaScript来替换论坛中烦人的字体。代码本身工作正常，但是执行也会杀死一个文本编辑器，这是不应该的。按钮和条形仍然存在，但是文本框已经没有了。使用的正则表达式在那里没有匹配的。

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

我试过document.body.innerHTML = document.body.innerHTML;，它什么也不做，只是用它自己来代替身体。即便如此，也会导致编辑器陷入困境。我也试图更改为WYSIWYG编辑器，但即使是那个消失了。

我不是那个网站的管理员，不想要的字体是任何人都可以使用的(有些人在每一篇文章中都会用到它们)。我只是不想他们出现在我的屏幕上。

我的猜测是scripting会干扰网站的脚本，但我如何验证这一点呢？

Answer 1

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

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

谢谢你的帮助。

Answer 2

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

​

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，因为这会破坏文档中的所有绑定。

Answer 3

在JavaScript (IE8+)中，您可以使用Document.querySelectorAll(选择器)。除了高级的jQuery过滤方法之外，这个选择器实际上可以执行几乎所有在jQuery和CSS中可以做的事情(甚至也不能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的内联样式，那么这并不难。

自制代码段//get元素，其中内联样式属性包含字体-族var annoyingFontElements =annoyingFontElements

//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'
}