How to Find and Replace Text in Web Pages

Web pages were essentially meant for reading and thus vendors never cared to include “find and replace” functionality in their web browsers. Websites have however evolved and they are no longer just blocks of static content. You can write lengthy emails or even dictate text inside web pages but if you are to fix those embarrassing spelling mistakes, you’ll have to correct them one-by-one.

You cannot automatically replace a word or phrase with another inside a web page without using browser extensions. The following tutorial discusses a simple technique that will help you search and replace text in web pages using the built-in Chrome Developer Tools but without any extensions.

Also see: How to Edit Web Pages

Search and Replace for any Webpage

We’ll take a popular Wikipedia page for this example and show you how to replace all instances of one word with another.

While you are on the web page, press Ctrl+Shift+J on Windows or Cmd+Opt+J on Mac to open the Console window inside Chrome Developer tools. Now enter the following command to replace all occurrences of the word ABC with XYZ.

document.body.innerHTML = document.body.innerHTML.replace(/ABC/g, “XYZ”)

You can use Regular Expressions for more complex substitutions. For instance, if you wish to replace all common misspellings of occurrence, you could use either of these:

document.body.innerHTML.replace(/(ocurrance|occurrance|occurance)/g, 'occurrence');
document.body.innerHTML.replace(/oc[\w]+nce/g, 'occurrence');

The same technique can be used to format words inside a page as well. For instance, the next command will bold all instances of the word Hello on a page.

document.body.innerHTML.replace(/Hello/g, '<b>Hello</b>');

Search and Replace Text in Gmail

Your changes aren’t preserved when you close the browser tab so you could be wondering why would anyone perform search and replace on a web page? Well, take the case of Gmail. You may have written a lengthy email but just when you were about to hit Send, you come across some spelling errors.

To fix the errors in Gmail, you can either copy the email message into notepad, perform search and replace and then paste the edited text back into Gmail. Or you can directly use Chrome Dev Tools.

In our previous example, we performed search and replace on document.body which in the entire web pages. However, in Gmail, we only need to replace text that’s inside the compose window.

The first step is to find the element on the web page where the search and replace operation should be done. This is easy as shown in the video above. Select the Gmail text, right-click and choose Inspect Element and make a note of the DIV ID that contains the editable textarea. It is “:h7” for Gmail.

Next, we need to is run the substitution command inside the Console window to replace word ABC with XYZ everywhere.

document.getElementById(':h7').innerHTML = document.getElementById(':h7').innerHTML.replace(/ABC/g, 'XYZ');

And your changes won’t be lost as Gmail will auto-save your Draft.

Also see: How to Learn Coding Online

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.