AngularJS: Escape HTML in input fields

Question

What is the best way to escape HTML in the input field? For example, I've search input field

<input id="search" type="text" ng-model="search" placeholder="search...">

And I want to escape if somebody types something like this:

<script>alert("test123");</script>

@Fran the question is clear. He wants to escape HTML characters. — lin, Dec 06 '17 at 09:32
@lin This Question does not show research effort and the requirements are not clear **to me** when OP wants to escape the characters. Hence I'm asking for more information. — Nope, Dec 06 '17 at 09:33

score 3 · Accepted Answer · edited Dec 06 '17 at 09:37

this completely depends on your use case. If you just want it to escape it for the users view (so basically sanitizing) you can use angular $sanitize & $sce for it

https://docs.angularjs.org/api/ngSanitize/service/$sanitize and https://docs.angularjs.org/api/ng/service/$sce

however if you want to store it somewhere and want it escaped, you can build a filter. You can find an example here: Escape HTML text in an AngularJS directive

lin · Answer 2 · 2017-12-06T09:29:58.207

1

You could use lodash _.escape([string='']). This is a easy and simple solution.

_.escape($scope.search);

edited Dec 06 '17 at 09:29

answered Dec 06 '17 at 09:22

lin

17,956
4
59
83

score -1 · Answer 3 · answered Dec 06 '17 at 09:25

-1

You could use pattern for your input box like -

<input type='text' pattern='[a-zA-Z0-9]+'>

Use an expression that best suits your needs.

answered Dec 06 '17 at 09:25

dbigpot

410
4
11

AngularJS: Escape HTML in input fields

3 Answers3