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
How To Convert Image To Base64 In Laravel 9
How To Convert Image To Base64...

In this article, we will see how to convert an image to base64 in laravel 9. Here, we will convert the image to bas...

Read More

Dec-29-2022

How to Install Imagick PHP Extension on Ubuntu 22.04
How to Install Imagick PHP Ext...

Hey there, fellow developers! Are you looking to enhance your PHP applications with powerful image-processing capabiliti...

Read More

Mar-06-2024

Laravel 9 Livewire Image Upload Example
Laravel 9 Livewire Image Uploa...

In this article, we will see the laravel 9 livewire image upload example. Here, we will learn how to upload an imag...

Read More

Dec-01-2022

Laravel 8 Custom Email Verification Tutorial
Laravel 8 Custom Email Verific...

In this article, we will see an example of laravel 8 custom email verification. Many web applications require users...

Read More

Dec-29-2021