How to replace a string by another string in AngularJS ?

Last Updated : 01 Aug, 2022

In this article, we will see how to select a string from the text and replace it with another string using AngularJS and will understand it through the illustrations. The replace() method can be used to search the particular character(s), which is getting replaced with a specific character(s) & return a new generated string.

Syntax:

string.replace(char findChar, char replacedChar);

Parameter Values:

findChar: It represents the character that is to be searched & replaced with the new character.
replacedChar: It represents the new replaced character, by replacing the findChar, that generates the new string.

Return Value: It returns the new string containing the new character(s) that have replaced the specified character(s).

Approach: The approach is utilizing the replace() method and replacing the content of the string with the new one. In the first example, the string ‘Welcome User‘ is replaced by the word ‘Geek‘ in place of ‘User‘. In the second example, the word ‘User‘ is replaced by the string user enters in the input element.

Example 1: In this example, the word “User” is getting replaced with the new word “Geek” using the replace() method.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.str1 = "Welcome User";
            $scope.str2 = "";
            $scope.remSpaces = function() {
                $scope.str2 = $scope.str1.replace("User", "Geek");
            };
        });
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3> Replace a string by another in AngularJS </h3>
    <div ng-app="app">
        <div ng-controller="controller"> String = '{{str1}}'
            <br><br>
            <button ng-click='remSpaces()'> 
                Replace User 
            </button>
            <br><br>
             Replaced String = '{{str2}}'
            <br> 
        </div>
    </div>
</body>
</html>

Output:

Example 2: In this example, the input character is getting replaced with the searched character with the help of replace() method.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.str1 = "Welcome User";
            $scope.str2 = '';
            $scope.replaceStr = function() {
                 
                // Get & replace the input value
                $scope.str1 = 
                      $scope.str1.replace("User", $scope.str2);
            };
        });
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        Replace a string by
        another in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller"> Enter here:
            <input type="text"
                   name="strExample"
                   ng-model="str2">
            <br><br>
            <button ng-click='replaceStr()'>
                 Replace
            </button>
            <br><br>
                String = {{str1}}<br>
        </div>
    </div>
</body>
</html>