Viewing HTML string as HTML

Question

I have some autogenerated html code highlighting some texts in my angularJS app. The line generating the html code is this one:

var replaced = original.replace(regEx, '<span style="background-color: red;">' + replacing + '</span>');
line[key + 'HL'] = replaced;

But writing this on template

<div><p>{{line.codeHL ? line.codeHL : line.code}} {{line.price}}</p></div>

shows this:

<span style="background-color: red;">GD5AU211</span> 102€

How can I force the evaluation of html code inside a string?

Also let's just say I can't use document.getElementById() for reasons.

Community · Accepted Answer · 2017-05-23 12:26:38Z

3

Refer to this link. This may be what you seek: AngularJS : Insert HTML into view

To enable html insertion into view you have to define html as trusted data using $sce.trustAsHtml()

Hope this would help.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered May 22, 2017 at 10:18

Parantap Parashar

2,0311 gold badge17 silver badges22 bronze badges

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

Comments

Sachila Ranawaka · Accepted Answer · 2017-05-22 10:17:46Z

0

if you are using angular 4 then use innerHTML

<div><p>

   <div [innerHTML]="line.codeHL ? line.codeHL : line.code">
    </div> {{line.price}}

</p></div>

if you are using angular 1 then use ng-bing-html

<div><p>
       <div ng-bind-html="line.codeHL ? line.codeHL : line.code | cust">
        </div> {{line.price}}
</p></div>

now create a cust filter like this

.filter('cust',function($sce){
  return function(html){
    return $sce.trustAsHtml(html)
  }
})

edited May 22, 2017 at 10:17

answered May 22, 2017 at 10:13

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

3 Comments

p4x Over a year ago

I'm on angular 1.4 :(

p4x Over a year ago

@Parantap Parashar solution worked so I assume yours would work too since it does basically the same.

Sachila Ranawaka Over a year ago

@p4x yes it should

abhishek khandait · Accepted Answer · 2017-05-22 10:23:24Z

0

Add <xmp> tag before your html that has to be displayed as text.

var replaced = original.replace(regEx, '<span style="background-color: red;"><xmp>' + replacing + '</xmp></span>');

answered May 22, 2017 at 10:23

abhishek khandait

2,1972 gold badges17 silver badges18 bronze badges

Collectives™ on Stack Overflow

Viewing HTML string as HTML

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related