How to parse the html which is embedded in a string inside a JavaScript object?

Question

<script>
  angular.module('module', []);

  angular.module('module').controller('hello', function($scope) {
    $scope.obj = {
      "text": "<u>HelloWorld</u>"
    };

  });

</script>

<body>

  <div ng-app='module' ng-controller='hello'>
    Current:{{obj.text}}

    <br>
    <br> Expected:<u>HelloWorld</u>
  </div>
</body>

I am trying to read an object stored in a JSON and then print it on my web page.

I have provided a link to the code above.

I am expecting the output to be a string "HelloWorld" which is underline.

ps:

I cannot edit the JSON
obj is the object that is being fetched, I could not share the JSON so i have used a hardcoded value.

There isn't any JSON shown in your code. You have an object. — nnnnnn
– nnnnnn, Commented Sep 29, 2016 at 8:18
Correct, I used a dummy object, but that object is being fetched from a JSON,since i couldn't share the entire JSON file here, i hardcoded the object in the script. Thanks for the suggestion — Adit A. Pillai
– Adit A. Pillai, Commented Sep 29, 2016 at 9:28

Pradeepb · Accepted Answer · 2016-09-29 08:15:26Z

3

You can use ng-bind-html and ng-bind-html-unsafe for that kind of purpose. you have to include ngSanitize from angular-sanitize.

<p ng-bind-html="obj.text"></p>

The example is shown here

answered Sep 29, 2016 at 8:15

Pradeepb

2,5723 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nikjohn · Accepted Answer · 2016-09-29 08:12:10Z

1

You want to just use a regular expression like so:

$scope.obj.text =  $scope.obj.text.replace(/(<([^>]+)>)/ig,"");

Working fiddle here

answered Sep 29, 2016 at 8:12

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

1 Comment

Adit A. Pillai Over a year ago

I want the <u> tag to get applied to the String rather than removing it.

devqon · Accepted Answer · 2016-09-29 08:15:27Z

1

You need to use the angular-sanitize module:

<script src="path/to/installed/angular-sanitize/angular-sanitize.js"></script>

<script>
    angular.module("module", ["ngSanitize"]);

    angular.module('module').controller('hello', function($scope) {
        $scope.obj = {
            "text": "<u>HelloWorld</u>"
        };

    });

</script>

And your html:

<div ng-app='module' ng-controller='hello'>
    Current: <p ng-bind-html="obj.text"></p>

    <br>
    <br> Expected:<u>HelloWorld</u>
</div>

answered Sep 29, 2016 at 8:15

devqon

14k2 gold badges32 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to parse the html which is embedded in a string inside a JavaScript object?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related