How to replace a string by another string in AngularJS ? - GeeksforGeeks

02 Sep, 2021
In this article, we will see how to select a string from the text and replace it by another string with the help of AngularJS.
Approach: The approach is to use the replace() method and replace the content of the string by 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:
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>     <p>        Replace a string by        another in AngularJS    </p>     <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:
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>     <p>        Replace a string by        another in AngularJS    </p>     <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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
abhishek0719kadiyan
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
How to bundle an Angular app for production?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property