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.

Answer 1

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.

Answer 2

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)
  }
})

Answer 3

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>');