How to replace all words with another words in HTML ? - GeeksforGeeks

11 Jun, 2020
The JavaScript replace() method is used to replace any occurrence of a character in a string or the entire string. It searches for a string corresponding to either a particular value or regular expression and returns a new string with the modified values.
One can also use regular expressions instead of strings for defining the character or string to be replaced. A regular expression is a string that contains special symbols and characters to find and extract the information needed from the given data. Regular expressions are basically strings containing characters and special symbols that can help to select the required values.
One has to note that the replace() function will replace only the first occurrence of the specified value. In order to replace all occurrences, one has to use the global modifier.
Syntax:
string.replace(valueToBeReplaced, newValue)
where ‘valueToBeReplaced’ can either be a string value or a regular expression.
Example 1: The replace() function will be used to replace the string ‘Hello’ with ‘Hi’
html
<!DOCTYPE html><html>  <head>    <title>Replace Example</title></head>  <body>    <h1>Hello welcome to our blog!</h1>      <p>        Hello today we shall learn about        replace() function in JavaScript        Click on the button below to replace        hello with hi.    </p>      <button onclick="rep()">Replace</button>          <script>          // Replace the first "Hello"        // in the page with "Hi"        function rep() {            document.body.innerHTML                = document.body.innerHTML                .replace("Hello", "Hi");        }    </script></body>  </html>
Output:
Before clicking the button: 
Before clicking the button: 
After clicking the button: 
After clicking the button: 
As seen in the above output, only the first occurrence of ‘Hello’ was substituted with ‘Hi’. To substitute all occurrences, a global modifier has to be used.
Example 2: Use the replace() function to replace all occurrences of the string ‘Hello’ with ‘Hi’
html
<!DOCTYPE html><html>  <head>    <title>Replace Example</title></head>  <body>    <h1>Hello welcome to our blog!</h1>      <p>Hello today we shall learn about        replace() function in JavaScript        Click on the button below to        replace hello with hi.    </p>          <button onclick="rep()">Replace</button>    <script>          // Replace all the "Hello"         // in the page with "Hi"        function rep() {            document.body.innerHTML =                document.body.innerHTML                .replace(/Hello/g, "Hi");        }    </script></body>  </html>
Output:
Before clicking the button:
Before clicking the button:
After clicking the button: 
After clicking the button: 
In the next example, both the global modifier and “i” modifier are used to ensure that all occurrences of the given word are replaced irrespective of their case.
Example 3: Using the replace() function to replace all occurrences of the string ‘Hello’ with ‘Hi’ irrespective of their case.
html
<!DOCTYPE html><html>  <head>    <title>Replace Example</title></head>  <body>    <h1>Hello welcome to our blog!</h1>      <p>        Hello today we shall learn about        replace() function in JavaScript        Click on the button below to        replace hello with hi.      </p>      <button onclick="rep()">        Replace    </button>      <script>        // Replace all the "Hello" in the        // page with "Hi" irrespective of        // the case        function rep() {            document.body.innerHTML =                document.body.innerHTML                .replace(/Hello/gi, "Hi");        }    </script></body>  </html>
Output:
Before clicking the button: 
Before clicking the button: 
After clicking the button:
After clicking the button:
Example 4: Using the replace() function to replace all occurrences of the string ‘Hello’ with ‘Hi’ on a particular tag.
html
<!DOCTYPE html><html>  <head>    <title>Replace Example</title></head>  <body>    <h1>Hello welcome to our blog!</h1>      <p>Hello today we shall learn about        replace() function in JavaScript        Click on the button below to replace        hello with hi.      </p>      <button onclick="rep()">Replace</button>          <script>        // Replace all the "Hello" in the        // page with "Hi" irrespective of the case        // with the h1 tag        function rep() {            document.getElementById('h1').innerHTML                = document.getElementById('h1')                    .innerHTML.replace(/Hello/g, "Hi");        }    </script></body>  </html>
Output:
Before clicking the button:
Before clicking the button:
After clicking the button: 
After clicking the button: 
As seen in the output, only the occurrences of ‘Hello’ in the h1 tag section of the code are replaced with ‘Hi’.
HTML-Misc
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?