JS innerHTML.replace() 行为

Question

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

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

我试过 document.body.innerHTML = document.body.innerHTML; 它什么都不做，只是用它自己替换 body。即使这样也会导致编辑器混乱。我也试过改成所见即所得的编辑器，但连那个也不见了。

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

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

Answer 1

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

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

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

摘自 MDN

[attr] Represents an element with an attribute name of attr.

[attr=value] Represents an element with an attribute name of attr and whose value is exactly "value".

[attr~=value] Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".

[attr|=value] Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.

[attr^=value] Represents an element with an attribute name of attr and whose value is prefixed by "value".

[attr$=value] Represents an element with an attribute name of attr and whose value is suffixed by "value".

[attr*=value] Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

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

编辑

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

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

有关更改样式的完整文档go here

您要做的是首先找到有问题的元素，例如那些带有烦人字体的。如果它们具有 always 包含 font-family 的内联样式，这将不难。

自制代码片段（未测试） //获取内联[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'
}

Answer 2

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

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

感谢您的帮助。

Answer 3

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

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

JS innerHTML.replace() 行为

JS innerHTML.replace() behavior

javascript

scriptish