How to Find and Replace Text in Web Pages

In this article we will discuss about how to Find and Replace Text in Web Pages. We’re sure you’ve been in a situation where you’re halfway through typing something and realize that the word you’ve been using the most is spelled wrong. Maybe you type a single word, an acronym, or a line of code a lot at work, but this one requires complicated hand movements that you’d rather not do over and over again.

If you use a cloud-based system or type a lot in your web browser, the process of finding misspelled words and changing them to the right spelling can be done automatically. With the “Find and Replace” extensions for Chrome and Firefox, you can find every misspelled word and change it to the right spelling with just one click.

You can save a lot of time and get more done by using Chrome and Firefox to find and replace text. But since it’s not a built-in feature, we’ll show you a Chrome, Chrome-based, and Firefox extension that does the job. You can also go to the official Microsoft support site to now more information about this.

How to Find and Replace Text in Web Pages

For this example, we’ll use a well-known webpage to show you how to change all instances of one word to another.

• Press Ctrl+Shift+J on Windows or Cmd+Opt+J on a Mac while on a website to open the Console window in Chrome Developer tools. Now, type the following command to change every instance of the word ABC to XYZ.

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

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

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

• The same method can also be used to format the words on a page. For example, the next command will make all of the words “Hello” on a page stand out in bold.

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

Search and Replace Text in Gmail

When you close the browser tab, your changes are lost, so you might wonder why anyone would use search and replace on a web page. Well, let’s look at Gmail. You may have written a long email, but right before you hit the Send button, you notice some spelling mistakes.

To fix the mistakes in Gmail, you can either copy the email message into Notepad, use search and replace, and then paste the edited text back into Gmail. Or you can use Chrome Dev Tools right away.

• The first step is to find the part of the web page where the search and replace should be done. This is easy to do. Right-click on the Gmail text, choose “Inspect Element,” and write down the DIV ID of the editable textarea. For Gmail, it is “:h7.“
• Next, we need to run the substitution command in the Console window to change every instance of the word ABC to XYZ.

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.

FAQ

What are the steps on using Find and replace?

• Click Home, then Replace.
• Type in the word or phrase you want to change. How to find.
• Fill in the new text in the Replace with box.
• Choose Replace All to change the word or phrase everywhere it appears.
• Select More > Match case to limit your search to only uppercase or lowercase letters.

What is the difference between search find and replace?

Both parts look the same, but they do different things. The Find function lets you find a certain number or string of text, and the Replace function lets you change a certain number or string of text into something else. Let’s look at each of these functions on its own.