1

I am using angular v1.5.6. I have some user entered html data along with special characters stored in the database. To illustrate,

var txt = "<span class='txt_bold'> content with <lessthan signs<span> <span>";

var txt1 = "<span class='txt_bold'> content with <4 lessthan >greaterthan signs <span>";

When I put above two lines in ng-bind-html directive I am getting output as below.

txt : content with 
txt1 : content with <4 lessthan >greaterthan signs

As we can see word after <(less than) sign from the txt is removed by directive. I tried solutions provided in below threads. However, neither of them worked for me to keep html css effect working.

  1. ng-bind-html work partially than expected
  2. Insert HTML into view

Any hint would be highly appreciated.

Dhruv Kapatel
  • 873
  • 3
  • 14
  • 27
  • If you put a space between the < and the number/letter it should work – SylvainF Mar 04 '19 at 16:31
  • 2
    If you allow users to use HTML tags for formatting user input, you may have to escape the special chars before storing them in the database, so that `txt` becomes ` content with <lessthan signs ` – Florian Lim Mar 04 '19 at 16:41

1 Answers1

0
<span class='txt_bold'> content with <lessthan signs<span> <span>

As we can see word after <(less than) sign from the txt is removed by directive

That is incorrect. The string is actually being parsed as:

<span class="txt_bold">
  content with
  <lessthan signs<span>
    <span></span>
  </lessthan>
</span>

The <lessthan is not being removed; it is being parsed as a <lessthan> tag. It is not being removed; it is being rendered as empty.

To escape the parsing use html entities:

&lt;lessthan

For more information, see MDN Web API Reference - innerHTML operational details

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • when I apply escape when saving and put in ng-bind directive instead of ng-bind-html directive it treats unescaped value as a string instead of html. – Dhruv Kapatel Mar 05 '19 at 11:22