JS innerHTML.replace() behavior

Question

I try to make a JavaScript replacing annoying fonts in a forum using Scriptish. The code itself works fine, but the execution also kills a text editor, which it shouldn't. The buttons and bars are still there, but the textbox is gone. The regex used doesn't have a match there.

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

I have tried document.body.innerHTML = document.body.innerHTML; which does nothing, but replacing the body with itself. Even this causes the editor to mess up. I also tried to change to the WYSIWYG editor, but even that one disappears.

I'm not admin of that website and the unwanted fonts are available to anyone (and some people use them in every post). I just don't want them to appear on my screen.

My guess is that Scriptish interferes with the website's scripting, but how can I verify this?

Answer 1

With the hint of Pete I found this solution pretty fast. This will override all user defined fonts with what you enter.

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

Thanks for your help.

Answer 2

You can find all the nodes and alter or remove the font-family in a loop.

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>

You should NOT use innerHTML as this breaks all the bindings in the document.

Answer 3

Within JavaScript (IE8+) you can use document.querySelectorAll(selector). This selector actually does almost anything you can do in jQuery and CSS except for the advanced jQuery filtering methods (not even 100% sure of that either).

anyways, if you do not want weird fonts on your screen you could do this document.querySelectorAll('[font-family^="serif-"]') - this means "look for elements whose attribute starts with serif- and from there on you'll get a nodelist which you can manipulate.

For full documentation on attribute selectors: go here.

Taken from 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.

These selectors should be of use in your case, combine these with document.querySelectorAll(selector) and you're gonna have a good time ;)

EDIT

So to add some extra details about the things you need to do here:

• Fetch all the elements using an offending font with document.querySelectorAll()
• Loop the elements in the collection using the for construct
• Within the loop use element[i].style.fontFamily = 'new-family' to replace all fonts.

For full documentation on changing styles go here

What you want to do is find the offending elements first, e.g. the ones with annoying fonts. If these have an inline style that always contains font-family this will not be hard.

homebrew snippet (untested) //get elements where the inline [style] attribute contains 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'
}