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 Install Elasticsearch in Laravel 10
How to Install Elasticsearch i...

Hey developers! If you're diving into the world of Laravel 10 and looking to supercharge your application's...

Read More

Dec-25-2023

Dropdown Filter On Specific Column In Datatable
Dropdown Filter On Specific Co...

In this article, we will see how to add multiple filter dropdowns in datatable. This example is almost identical to...

Read More

Jun-06-2022

Image Upload in Summernote Editor Using Laravel
Image Upload in Summernote Edi...

In this post we will see how to upload image in summernote editor. there are many editor available in laravel...

Read More

Jul-09-2021

How To Create Custom Login Page In Django
How To Create Custom Login Pag...

In this article, we will see how to create a custom login page in django. how to allow user registration, login, an...

Read More

May-14-2022