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