Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The jQuery trick doesn't encode quote marks and in IE it will strip your whitespace.</p> <p>Based on the <strong>escape</strong> templatetag in Django, which I guess is heavily used/tested already, I made this function which does what's needed.</p> <p>It's arguably simpler (and possibly faster) than any of the workarounds for the whitespace-stripping issue - and it encodes quote marks, which is essential if you're going to use the result inside an attribute value for example.</p> <pre><code>function htmlEscape(str) { return str .replace(/&amp;/g, '&amp;amp;') .replace(/"/g, '&amp;quot;') .replace(/'/g, '&amp;#39;') .replace(/&lt;/g, '&amp;lt;') .replace(/&gt;/g, '&amp;gt;'); } // I needed the opposite function today, so adding here too: function htmlUnescape(str){ return str .replace(/&amp;quot;/g, '"') .replace(/&amp;#39;/g, "'") .replace(/&amp;lt;/g, '&lt;') .replace(/&amp;gt;/g, '&gt;') .replace(/&amp;amp;/g, '&amp;'); } </code></pre> <p><strong>Update 2013-06-17:</strong><br> In the search for the fastest escaping I have found this implementation of a <code>replaceAll</code> method:<br> <a href="http://dumpsite.com/forum/index.php?topic=4.msg29#msg29" rel="noreferrer">http://dumpsite.com/forum/index.php?topic=4.msg29#msg29</a><br> (also referenced here: <a href="https://stackoverflow.com/questions/2116558/fastest-method-to-replace-all-instances-of-a-character-in-a-string/6714233#6714233">Fastest method to replace all instances of a character in a string</a>)<br> Some performance results here:<br> <a href="http://jsperf.com/htmlencoderegex/25" rel="noreferrer">http://jsperf.com/htmlencoderegex/25</a></p> <p>It gives identical result string to the builtin <code>replace</code> chains above. I'd be very happy if someone could explain why it's faster!?</p> <p><strong>Update 2015-03-04:</strong><br> I just noticed that AngularJS are using exactly the method above:<br> <a href="https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435" rel="noreferrer">https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435</a></p> <p>They add a couple of refinements - they appear to be handling an <a href="http://en.wikipedia.org/wiki/UTF-8#Invalid_code_points" rel="noreferrer">obscure Unicode issue</a> as well as converting all non-alphanumeric characters to entities. I was under the impression the latter was not necessary as long as you have an UTF8 charset specified for your document.</p> <p>I will note that (4 years later) Django still does not do either of these things, so I'm not sure how important they are:<br> <a href="https://github.com/django/django/blob/1.8b1/django/utils/html.py#L44" rel="noreferrer">https://github.com/django/django/blob/1.8b1/django/utils/html.py#L44</a></p> <p><strong>Update 2016-04-06:</strong><br> You may also wish to escape forward-slash <code>/</code>. This is not required for correct HTML encoding, however it is <a href="https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#RULE_.231_-_HTML_Escape_Before_Inserting_Untrusted_Data_into_HTML_Element_Content" rel="noreferrer">recommended by OWASP</a> as an anti-XSS safety measure. (thanks to @JNF for suggesting this in comments)</p> <pre><code> .replace(/\//g, '&amp;#x2F;'); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload