Question

我尝试使用Scriptish在论坛中替换烦人的字体。代码本身工作正常，但执行也杀死了文本编辑器，它不应该。按钮和条仍然存在，但文本框已经消失。使用的正则表达式没有匹配。

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

我试过document.body.innerHTML = document.body.innerHTML;什么也没做，但用自己取代身体。即便这样也会导致编辑陷入困境。我也尝试改为WYSIWYG编辑器，但即使那个也消失了。

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

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

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

您可以找到所有节点并在循环中更改或删除font-family。

＆＃13;

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!");
}

＆＃13;

<span style="font-family: Arial">Blaaa</span>
<span style="font-family: Verdana">Blaaa</span>
<span style="font-family: Tahoma">Blaaa</span>

＆＃13;

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

Answer 3

在JavaScript（IE8 +）中，您可以使用document.querySelectorAll(selector)。除了高级jQuery过滤方法之外，这个选择器实际上几乎可以在jQuery和CSS中执行任何操作（甚至不能100％确定）。

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

有关属性选择器的完整文档：go here。

取自MDN

<强> [ATTR]   表示属性名称为attr。
的元素
<强> [ATTR =值]   表示属性名称为attr且其值正好为“value”的元素。

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

<强> [ATTR | =值]   表示属性名称为attr的元素。它的值可以是“值”，也可以以“值”开头，后跟“ - ”（U + 002D）。它可以用于语言子码匹配。

<强> [ATTR ^ =值]   表示属性名称为attr且其值以“value”为前缀的元素。

<强> [ATTR $ =值]   表示属性名称为attr且其值以“value”为后缀的元素。

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

这些选择器应该在您的情况下使用，将它们与document.querySelectorAll(selector)结合使用，您将度过愉快的时光;）

修改

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

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

有关更改样式go here
的完整文档
您要做的是首先找到有问题的元素，例如那些烦人的字体。如果这些内联样式始终包含font-family，那么这将不会很难。

homebrew snippet（未经测试） //获取inline [style]属性包含font-family的元素 var annoyingFontElements = 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' }

JS innerHTML.replace（）行为

3 个答案: