Here's some code you can easily run in your browser, just for fun. Note: this will not change any actual websites, just the way your browser displays them, and only until you close the site! If anything breaks, close the tab and reopen it :)

The code is written in JavaScript, which is one of the main languages of the internet. It's a good language to learn because the only tool you need to get started is a browser, you can run it on webpages, and use it to make web apps. Chrome or Firefox should work fine with this code - if you have any problems, make sure you're using the latest version.

Go to a simple website to try this out. The first website ever should do nicely.

Open the developer console (F12 or right-click > inspect element) and click 'Console' if necessary. Paste the following code (you may get a warning - don't paste code you don't trust) and hit Enter:

  Array.from(document.querySelectorAll('*'))
  .forEach(
    e=>e.innerHTML=
    e.innerHTML.replace(/web/gi,'wob')
  )

This code replaces any text reading 'web' to 'wob'. Cool! Now, this is a very short bit of code so it might have unexpected results (e.g. it doesn't just replace text, but will change links, which might break them), but try doing a replace of your own. Just change web and wob to whatever you like. Leave everything else the same, and it should work.

Challenge

Go to The Guardian website and change 'Donald Trump' to 'Donald Duck'. See the explanation below or ask if you get stuck.

How does it work?

Here's what we want to do in English, then we'll translate it into JavaScript.

  1. Look at everything on the page.
  2. Go through each element (each paragraph, link etc)
  3. Update the text of each element to: the old text but with every instance of 'web' replaced by 'wob', ignoring capital letters (i.e. 'Web' will be replaced too).

We'll look at the code bit by bit. The first bit makes a list (called an array) from everything (* selects everything) in the document:

  Array.from(document.querySelectorAll('*'))

The next bit says 'work through the list':

    .forEach(

The next bit is 'what we are going to do' for each list element. Firstly we give the element a name, so we can refer to it. We call it e. The arrow is a shorthand, which we are using to do something to e. It's more complicated than that but don't worry :)

      e=>

Then we write how we want to transform the element (e). innerHTML refers to the code (HTML is the code used to structure webpages) inside that element. If we say e.innerHTML= will set the contents of that element to whatever is after the =:

         e.innerHTML=

We want to set the text to a new value. To make that new value, we need to 'get the old value, and replace web with wob'. We can write that as:

      e.innerHTML.replace('web','wob')

However, that will only replace the first 'web' in each element and then stop. To replace all, we need to make it 'global' which has a shorthand /web/g (g=global). Also, it won't replace 'Web', so we need to make it case-insensitive by adding i: /web/gi:

      e.innerHTML.replace(/web/gi,'wob')

And finally, we opened brackets for forEach so we should close them, so the browser knows to move onto the next element of the document (for each element of the document, the stuff inside the brackets of .forEach(...) gets done:

      )

Putting it all together:

  Array.from(document.querySelectorAll('*'))
  .forEach(
    e=>e.innerHTML=
    e.innerHTML.replace(/web/gi,'wob')
  )


652 0 11