How To Replace All Occurrences Of String In Javascript

Websolutionstuff | Nov-07-2022 | Categories : jQuery

In this article, we will see how to replace all occurrences of a string in javascript. You can use the javascript replace() and replaceAll() methods to replace all occurrences of a string. So, we will learn how to replace all occurrences with regular expressions.

So, let's see javascript replace all occurrences, jquery replace all occurrences of a string and regex replace all occurrences.

The replace() method searches a string for a value and it returns a new string with the value replaced. Also, The replace() method is not changed the original string.

Syntax:

string.replace(search value, new value)

 

The replaceAll() method returns a string by replacing all the occurrences of the string.

Syntax:

string.replaceAll(search value, replacement value)

 

Example:

<!DOCTYPE html>
<html lang="en">
<body>
    <h4>Original String</h4>
    <p>PHP is an easy programming language.</p>
    <h4>String After Replacement</h4>
    
    <script>
        var myStr = 'PHP is an easy programming language.';
        var newStr = myStr.replace('PHP','Laravel');
        
        // Printing the modified string
        document.write('<p>' + newStr + '</p>');
      
    </script>
</body>
</html>

Output:

Original String

PHP is an easy programming language.

String After Replacement

Laravel is an easy programming language.

 

 

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Replace All Occurrences a String</title>
</head>
<body>
    <h4>Original String</h4>
    <p>This is multiple occurrences example. multiple occurrences string example.</p>
    <h4>String After Replacement</h4>
    
    <script>
        var myStr = 'This is multiple occurrences example. multiple occurrences string example.';
        var newStr = myStr.replace(/multiple/g, "two");
        
        // Printing the modified string
        document.write('<p>' + newStr + '</p>');
    </script>
</body>
</html>

Output:

Original String

This is multiple occurrences example. multiple occurrences string example.

String After Replacement

This is two occurrences example. two occurrences string example.

 

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Replace All Words String Example</title>
</head>
<body>
    <h4>Original String</h4>
    <p>This is replaceAll string example. replaceAll string example.</p>
    <h4>String After Replacement</h4>
    
    <script>    
         
    var myStr = 'This is replaceAll string example. replaceAll string example.';
    var newStr = replaceAll(myStr, 'replaceAll', 'multiple')
        
    document.write('<p>' + newStr + '</p>');
    </script>
</body>
</html>

Output:

Original String

This is replaceAll string example. replaceAll string example.

String After Replacement

This is multiple string example. multiple string example.

 

 

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Regular Expression to Replace All Words</title>
</head>
<body>
    <h4>Original String</h4>
    <p>abc xyz abc</p>
    <h4>String After Replacement</h4>
    
    <script>
    
    function escapeRegExp(string){
        return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
    }
        
    function replaceAll(str, term, replacement) {
      return str.replace(new RegExp(escapeRegExp(term), 'g'), replacement);
    }
        
    var myStr = 'abc xyz abc';
    var newStr = replaceAll(myStr, 'abc', 'xyz')
        
    document.write('<p>' + newStr + '</p>');
    </script>
</body>
</html>

Output:

Original String
abc xyz abc

String After Replacement
xyz xyz xyz

 


You might also like:

Recommended Post
Featured Post
Laravel 8 CRUD Operation Example
Laravel 8 CRUD Operation Examp...

In this article, we will see the laravel 8 crud operation. As you know Laravel 8 has already been officially released an...

Read More

Sep-16-2020

How To Import Large CSV File In Database Using Laravel 9
How To Import Large CSV File I...

In this article, we will see how to import a large CSV file into the database using laravel 9. Here, we will learn&...

Read More

Sep-15-2022

How to Upgrade from Angular 14 to Angular 15
How to Upgrade from Angular 14...

As a developer, keeping up with the latest advancements in Angular is crucial to stay ahead in the rapidly evolving worl...

Read More

May-31-2023

How To Create Custom Middleware In Laravel 9
How To Create Custom Middlewar...

In this article, we will see how to create custom middleware in laravel 9. Laravel middleware provides a conve...

Read More

Mar-27-2022