2

我尝试使用 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 编辑器，但即使是那个也消失了。

我不是该网站的管理员，任何人都可以使用不需要的字体（有些人在每篇文章中都使用它们）。我只是不希望它们出现在我的屏幕上。

我的猜测是 Scriptish 会干扰网站的脚本，但我该如何验证呢？

4

3 回答 3

2

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

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

谢谢你的帮助。

于 2015-06-24T08:58:17.453 回答
1

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

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

于 2015-06-24T09:03:09.527 回答
0

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

无论如何，如果您不希望屏幕上出现奇怪的字体，您可以这样做 document.querySelectorAll('[font-family^="serif-"]')——这意味着“查找属性以开头serif-并从那里开始的元素，您将获得一个可以操作的节点列表。

有关属性选择器的完整文档：转到此处。

取自 MDN

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

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

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

[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将不难。

homebrew snippet (untested) //获取内联 [style] 属性包含 font-family 的元素 var fuckingFontElements = document.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'
}
于 2015-06-24T08:41:57.850 回答