Learn how you can perform search and replace on web pages
without using extensions. You can find and substitute text in
Gmail too using this simple technique.
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.
Image
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.
Image
The first step is to find the element on page where the search
& replace 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.
Now all we need to is run the substitution command inside the
Console window to replace word ABC with XYZ everywhere.
