Problem: I am having a hard time to replace"&amp ;" to &. Is their a way to use javascript to replace the ampersand to &.

<div class="col-md-4 no-margin padding" id="change">
 <strong>Specialty: </strong>{{e.Specialty}}
</div>

I would like to replace the "&amp ;" when it grabs the data from the database to "&".

So currently, it will display "Nursing &amp ; Doctor" rather then "Nursing & Doctor"

How can I achieve this using replace. I have tried ng-show, Santize, and ng-bind-html but have not worked out for me.

Problem: I am having a hard time to replace"&amp ;" to &. Is their a way to use javascript to replace the ampersand to &.

<div class="col-md-4 no-margin padding" id="change">
 <strong>Specialty: </strong>{{e.Specialty}}
</div>

I would like to replace the "&amp ;" when it grabs the data from the database to "&".

So currently, it will display "Nursing &amp ; Doctor" rather then "Nursing & Doctor"

How can I achieve this using replace. I have tried ng-show, Santize, and ng-bind-html but have not worked out for me.

• javascript
• angularjs

Share Improve this question Follow asked Sep 19, 2017 at 17:13 RobertRobert 16711 gold badge22 silver badges1414 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

This is not necessarily the best way but for those of you that need to do this you can use this:

var parser = new DOMParser;
var dom = parser.parseFromString(YOURSTRING,'text/html');
var decodedString = dom.body.textContent;

You have to use $sce service and trustAsHtml so that Angular will not do the encoding and display the output without output encoding. Details are here https://docs.angularjs/api/ngSanitize

Steps are below-

1. Include ngSanitize module - angular.module('app', ['ngSanitize']);
2. Inject $sce service in your controller
3. Truest output using - vm.Specialty= $sce.trustAsHtml(Specialty);
4. Display to the user without output encoding - Specialty: bind-html-pile=e.Specialty

This can be done using

<span ng-bind-html="e.Specialty"></span>

and include ['ngSanitize'] in your module

plunkr example: https://plnkr.co/edit/d6Anjr7vL6un9d0yL5ZW?p=preview

I would use a filter...

JavaScript:

myApp.filter('andFilter', function() {
  return function(item) {
    return item.replace(/&amp ;/g, '&');
  }
});

HTML:

<div class="col-md-4 no-margin padding" id="change">
 <strong>Specialty: </strong>{{e.Specialty | andFilter}}
</div>