There have been a number of times where I was looking to quickly replace either a word or text within in an element on a webpage, sometimes for work but mainly just for fun. I have found a number of ways to accomplish this by using some quick javascript snippets in the console.

For demonstration purposes, I've included some Bob Ross Ipsum below to test these snippets.

We'll put a happy little sky in here

And I know you're saying, 'Oh Bob, you've done it this time.' And you may be right. Now we can begin working on lots of happy little things. Trees live in your fan brush, but you have to scare them out.

Be a gentle whisper

I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate things. I'm sort of a softy, I couldn't shoot Bambi except with a camera. Of course he's a happy little stone, cause we don't have any other kind. There isn't a rule. You just practice and find out which way works best for you. You have to allow the paint to break to make it beautiful.

• Let's make some happy little clouds in our world.
• If it's not what you want - stop and change it.
• Don't just keep going and expect it will get better
• I'm gonna start with a little Alizarin crimson and a touch of Prussian blue.

Let's have a happy little tree in here.

It's amazing what you can do with a little love in your heart. We're not trying to teach you a thing to copy. We're just here to teach you a technique, then let you loose into the world. You better get your coat out, this is going to be a cold painting. Be so very light. We'll throw some old gray clouds in here just sneaking around and having fun.

I am an element with a data attribute of [data-hierarchy="pick-me"]

Select the first h3 element on the page and replace text

Let's select the first h3 element on the page and replace it with some text.

1. Open the Console in the Developer Tools (Chrome)
   Mac: Option + CMD + J | Win: Shift + CTRL + J
2. Copy Javascript snippet below

document.querySelector("h3").innerHTML = "First h3 text on page replaced";

3. Paste it into the Console and hit return

Now check the first h3 element on the page. What used to be "We'll put a happy little sky in here" has now been replaced with the "First h3 text on page replaced".

Select All h3 Elements and Replace Text With Array.forEach()

That was pretty cool, but what if you want to replace all h3 elements on the page at once. Here we can use the forEach method to grab all h3s on the pages and replace their text.

1. Open the Console in the Developer Tools (Chrome)
   Mac: Option + CMD + J | Win: Shift + CTRL + J
2. Copy Javascript snippet below

document.querySelectorAll("h3").forEach( x => x.innerHTML = "All h3 text should be replaced on the page");

3. Paste it into the Console and hit return

Now check all the above h3 elements on the page. The previous h3 text should now all be replaced with "All h3 text should be replaced on the page".

Select All h3 Elements and Replace Text With a FOR LOOP

What if you want to use a good ol' FOR loop to replace all h3 elements on the page at once. Let's do it.

1. Open the Console in the Developer Tools (Chrome)
   Mac: Option + CMD + J | Win: Shift + CTRL + J
2. Copy Javascript snippet below

var x, i;
x = document.querySelectorAll("h3");

for (i = 0; i < x.length; i++) {
  x[i].innerHTML = "Replaced by a for loop";
}

3. Paste it into the Console and hit return

Select All h3 Elements and Replace Text With Array.prototype.map()

Let's try the map method. First we convert the array-like or iterable object into an array with the Array.from() method. Then we'll use Array.prototype.map() to create a new array populated with every h3 on the page.

1. Open the Console in the Developer Tools (Chrome)
   Mac: Option + CMD + J | Win: Shift + CTRL + J
2. Copy Javascript snippet below

Array.from(document.querySelectorAll("h3")).map( x => x.innerHTML = "Replaced by the map method");

3. Paste it into the Console and hit return

Select Element by Data Attribute and Replace Text

Just to practice selecting by data attribute, let's try the snippet below.

1. Open the Console in the Developer Tools (Chrome)
   Mac: Option + CMD + J | Win: Shift + CTRL + J
2. Copy Javascript snippet below

document.querySelector("h4[data-hierarchy='pick-me']").innerHTML = "Selected by data attribute and text replaced";

3. Paste it into the Console and hit return

Be sure to use single quotes when selecting by data attribute inside double quotations

Quick Browser Console Hack

Copy the code into the Console in someone's browser. Sit back and watch the panic :)

  const allElements = document.querySelectorAll("h1, h2, h3, h4, h5, p, a, span, submit, img")
  const textElements = document.querySelectorAll("h1, h2, h3, h4, h5, p, span")
  const images = document.querySelectorAll("img, source")
  const backgroundImages = document.querySelectorAll("div")

  allElements.forEach(x => x.addEventListener('click', (x) => {
      // prevent links and submit button from performting their default actions
      x.preventDefault()

      // replace text for each element in the text array
      textElements.forEach(x => x.innerHTML = "Gotcha!");

      // replace src and srcset for each img in the images array
      images.forEach(x => {
        x.src = "https://dubspot.io/static/17b8993636e9954d9ba11c8c63abca6f/4fe8c/profile_sq.jpg"
          x.srcset = "https://dubspot.io/static/17b8993636e9954d9ba11c8c63abca6f/4fe8c/profile_sq.jpg"
          x.style.objectFit = "cover"
      })

      // replace background image for each div in the array of divs selected
      backgroundImages.forEach(x => {
          if(x.style.backgroundImage) {
              x.style.backgroundImage = "url(https://dubspot.io/static/17b8993636e9954d9ba11c8c63abca6f/4fe8c/profile_sq.jpg)"
              x.style.backgroundSize = "cover"
              x.style.backgroundPosition = "center"
          } 
          return
      })
  }))