1

Background

Based on today's XKCD I created the below script:

javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+)*/gmi,'curse').replace(/language/gmi,'word');

If you go to a site (e.g. http://en.wikipedia.org/wiki/Programming_language) and paste the above code (re-adding the javascript: if required) this performs a regex replace on the document's content, whilst preserving most formatting, creating some fun reading.

However, the look of the site is affected; presumably because I'm replacing innerHTML rather than just innerText (I guess; though not sure).

I can't simply replace innerText as all elements include their child's innerText in their own; doing this on the body element would remove all formatting, and doing it on every element would duplicate huge amounts of content.

Question

Is there a way to iterate through all nodes in an HTML document, via (minimal) javascript, replacing words in their immediate child text values whilst preserving their remaining content?

JohnLBevan
  • 22,735
  • 13
  • 96
  • 178
  • 1
    I admit this is just for fun; not a serious work question - but it's intriguing and a good chance to learn / improve my javascript. Thanks in advance for any thoughts. – JohnLBevan Feb 12 '15 at 21:26
  • 2
    Yes there is a way. What you want to do is iterate through the [text nodes](http://stackoverflow.com/questions/2579666/getelementsbytagname-equivalent-for-textnodes) only. – zzzzBov Feb 12 '15 at 21:28

1 Answers1

1

The Javascript that you have doesn't change the page at all. It reads the content of the body into a string, then changes the string. That doesn't affect the content.

The reason that the page changes is that the value of the script is the value of the string, so that is used as content for a new page. As that is just a HTML snippet without the head tag where all the styles and scripts are defined, you get an unstyled page with just the content.

If you want to change the page, you should put the string back as content in the body, then use void(0); as the last statement to prevent the creation of a new page:

javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+)*/gmi,'curse').replace(/language/gmi,'word');document.getElementsByTagName('body')[0].innerHTML=a;void(0);
Guffa
  • 687,336
  • 108
  • 737
  • 1,005