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.

Select the first h4 element on the page and replace text

1. Open the Console in the Developer Tools (Chrome)

2. Copy Javascript snippet below

document.querySelector("h4").innerHTML = "The first h4 text on the page has been replaced";

3. Paste it into the Console and hit return

Now check the first h4 element on the page. What used to be "Select the first h4 element on the page and replace text " has now been replaced with the "The first h4 text on the page has been replaced".

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

That was pretty cool, but what if you want to replace all h4 elements on the page at once. We can use the forEach method to grab all h4s on the page and replace their text.

1. Open the Console in the Developer Tools
2. Copy Javascript snippet below

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

3. Paste it into the Console and hit return

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

Select All h4 Elements and Replace Text With a FOR LOOP

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

1. Open the Console in the Developer Tools
2. Copy Javascript snippet below

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

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 h4 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 h4 on the page.

1. Open the Console in the Developer Tools
2. Copy Javascript snippet below

Array.from(document.querySelectorAll("h4")).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
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

Quick Browser Console Hack

Copy and paste this code into the Console of someone's browser and hit return. Watch the panic that ensues when they click on an element on the web page.

const allElements = document.querySelectorAll("h1, h2, h3, h4, h4, p, a, span, submit, img");
const textElements = document.querySelectorAll("h1, h2, h3, h4, h4, 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://res.cloudinary.com/ndub/image/fetch/v1540505745/https://www.sciencealert.com/images/articles/processed/DogPoop_1024.jpg";
      x.srcset =
        "https://res.cloudinary.com/ndub/image/fetch/v1540505745/https://www.sciencealert.com/images/articles/processed/DogPoop_1024.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://res.cloudinary.com/ndub/image/fetch/v1540505745/https://www.sciencealert.com/images/articles/processed/DogPoop_1024.jpg)";
        x.style.backgroundSize = "cover";
        x.style.backgroundPosition = "center";
      }
      return;
    });
  }),
);