0

How to find and replace a specific text on a html page using AngularJs

That text is on a third party component so the id and the class is keeping changing. What I can reference is the text itself that I want to change.

That specific text on the html page is no class or id or any ng-tag around it.

I am not a angularjs developer and the page was built on asp.net mvc with the view (cshtml) using angularjs version1.

Is there a way in angularjs to find and place the text like the way in javascript:

document.body.innerHTML = document.body.innerHTML.replace('old_text', 'new_text');

Thank you!

user1040091
  • 21
  • 1
  • 4

2 Answers2

0

In angularjs each application state(page) has a controller. The logic to access the Dom should placed in said controller.

To manipulate the DOM please see this answer

Yusof Bandar
  • 169
  • 1
  • 4
  • 9
  • I know I need to write the code in the following app and controller: angular.module('my_app') .controller('my_controller', ['$scope', function($scope) { my_code........ }]); But I still do not know what code I write to replace a specific text on the html page that text without a class or id or any ng-tag. – user1040091 Mar 22 '19 at 21:40
0

In Angular world, it's called data binding. Here are the official docs on data binding.

Here is the working DEMO of data being updated in time. First, html displays "Initial Text" and in 5 seconds it's changed to "New Text".

What was done for this demo:

  1. An angular component was created with a dedicated variable $scope.text that holds text values that will change in time.
  2. Then, this variable is used in the HTML markup, like this: {{ text }}.
  3. Angular handles the HTML re-rendering automatically for you, so when the value of $scope.text is modified in the component, Angular forces re-rendering of the html in the browser

UPD another example with Angular two-way binding: DEMO.

Here user can change $scope.text value in the input field, which automatically changes its value in the controller. Try to edit the input field and you will see how it instantly updates in the header above the input field.

Nadine
  • 559
  • 2
  • 15
  • The difficult part is there is no way to create the data binding. For example, there is the static fixed text "Initial Text" on the HTML page when it is loaded and you are out of control of it, then how the angularjs finds where the text "initial Text" is, and sets up the binding and replaces it to "New Text". Is it possible and could you please show me some example code? – user1040091 Mar 24 '19 at 18:41
  • @user1040091 Angular does it automatically itself. This is why we love it :) To display different text, all you need to do is to re-assign it to `$scope.text` in a controller. Look at the Javascript part of my demo - there is this part: `$scope.text = 'New Text';` That's all you need to do in order to display another text in the HTML markup. – Nadine Mar 24 '19 at 18:52
  • @user1040091 If you need to display yet another text, just re-assign it again `$scope.text = 'Anothe Text'`. The markup will be re-rendered accordingly. So with Angular you don't need to worry about finding the text inside the markup and replacing it manually, like you do this with vanilla JS or jQuery. All you need to do is to re-assign variables in the controller, which is in charge of the current piece of the markup. – Nadine Mar 24 '19 at 18:56
  • @user1040091 I've updated my answer to include another demo of Angular two-way binding, where a user can edit the text in the input field, which will instantly re-render it in the header. All the code that you need to implement this is displayed in the HTML and JS sections of the Codepen. – Nadine Mar 24 '19 at 19:06