Replace string in value from an JavaScript object

Question

I have a JSON file which contains multiple <br /> tags. The file is parsed using JSON.parse(json) into an object. Because I bind the data with AngularJS and ng-repeat I don't want that the strings have any HTML tags and replace it with a new line \n. How can I replace all tags? It seems to me that replace() only works with strings.

Thanks for your help!

JSON example

{
    "title": "Title",
    "description": "This<br />is<br />a<br />description."
}

JavaScript

var retrievedObject = JSON.parse(json);
$scope.data = retrievedObject;

HTML

<div ng-repeat="item in data">
    {{item.description}}
    {{item.description}}
</div>

possible duplicate of [angularjs to output plain text instead of html](http://stackoverflow.com/questions/17289448/angularjs-to-output-plain-text-instead-of-html) — ebo, May 12 '14 at 17:48

score 2 · Answer 1 · answered May 12 '14 at 17:45

2

You could just replace it before you parse the string

var retrievedObject = JSON.parse(json.replace(/\<br \/\>/g, ''));

A better option would be to parse the strings as HTML and extract the text without the tags, not using a regex before you insert them in the DOM

answered May 12 '14 at 17:45

adeneo

312,895
29
395
388

Thanks for your help. I forgot to mention that I want to replace the tags with a new line and edited my post while you answered my question. Sorry. – ohh2ahh May 12 '14 at 17:48

score 2 · Answer 2 · answered May 12 '14 at 18:24

There's two ways to do what you're looking for. One with css where you replace the br's with \n and then in your css file give the element the white-space property of pre-wrap.

The other is angularish. Take a read of data-ng-bind-html. You'd be able to actualy have the br's outputted. https://docs.angularjs.org/api/ng/directive/ngBindHtml You would have to run it through a filter of $sce so that it's trusted but your code would be as simple as:

<div ng-repeat="item in data">
    <span data-ng-bind-html="item.description | trusted"></span>
    <span data-ng-bind-html="item.description | trusted"></span>
</div>

your filter for trusted would be this:

.filter("trusted", function($sce){
    return function(input){
        return $sce.trustAsHtml(input);
    }
});

score 1 · Accepted Answer · answered May 12 '14 at 18:33

ngBindHtml will let you keep keep the <br>s and render newlines in your HTML. It will automatically sanitize your input using ngSanitize to strip out any tags are aren't in its whitelist (you have to bring ngSanitize in as a dependency)...

var app = angular.module("app", ["ngSanitize"]);

The view is as simple as...

<div ng-bind-html="item.description"></div>

JsBin

You can also use $sce.trustAsHtml() to tell ngBindHtml to blindly trust the HTML without sanitizing, but only do that if you can completely trust its content (i.e., not for things like user submitted comments, etc).

Thank you, this is exactly what I needed! I've tried `ng-bind-html` but I didn't know about `ngSanitize` and bringing it in as a dependency. — ohh2ahh, May 12 '14 at 20:09

Replace string in value from an JavaScript object

3 Answers3