htmlEntities for JavaScript

htmlentities() is a PHP function which converts special characters (like <) into their escaped/encoded values (like &lt;). This allows you to show to display the string without the browser reading it as HTML.

JavaScript doesn't have a native version of it. If you just need the very basics to so that the browser won't interpret as HTML, this should work fine (via James Padolsey and I got a a similar idea from David Walsh).

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

The PHP.js project, which is a project to port over all of PHP's native functions to JavaScript, contains an example as well. I tried it and it works, but I've been warned much of the code from that project is poorly written, so I've kept it simple and used the above.

Comments

  1. User Avatar
    Krinkle
    Permalink to comment#

    I use the following two functions, in my opinion a very solid, complete and easy method.
    This particulary example uses jQuery but the principe isn’t dependant on jQuery:

    // Encode/decode htmlentities
    	function krEncodeEntities(s){
    		return $j("<div/>").text(s).html();
    	}
    	function krDencodeEntities(s){
    		return $j("<div/>").html(s).text();
    	}
    • User Avatar
      Miguel
      Permalink to comment#

      Can you show an example of the above jquery encoding working on a form?

      Is this right?

    • User Avatar
      Domenic Corso
      Permalink to comment#

      Thanks a lot haha! It’ll solve a lot of problems with AJAX for me :D

    • User Avatar
      HayNar
      Permalink to comment#

      This is nice hack but it’s not useful for high scale web applications where the performance is crucial. This portion of code creates a dummy DOM element to manipulate the text inside, DOM method calls are the most resource taking methods. I would prefer using multiple replaces applied to the string rather than creating and destroying a dummy DOM element.

  2. User Avatar
    Ben
    Permalink to comment#

    Thanks for the two functions, that helped me out of a pickle working with a serialized query string.

  3. User Avatar
    Mark
    Permalink to comment#

    Thanks for the info!! (^_^)b

  4. User Avatar
    buzz
    Permalink to comment#

    the problem with the jQuery approach is if your text contains htmlentities, e.g.

    $(”).text(‘&’).html()

    outputs:

    “&amp;”

    maybe not what you want…..

    • User Avatar
      buzz
      Permalink to comment#

      entities filtered in above post. should read:

      $(‘<p>’).text(‘&amp;’).html()

      will output

      &amp;amp;

    • User Avatar
      oria

      Your example proves that it works perfectly.
      htmlEntities(‘&’) SHOULD return ‘&amp;’

      To test it see if you can the same value when encoding and decoding back.

  5. User Avatar
    Vinay
    Permalink to comment#

    Thanks it helped..:)?

  6. User Avatar
    john
    Permalink to comment#

    Sure it works when you post, but what about saving

  7. User Avatar
    Bret
    Permalink to comment#

    The problem with this approach, as Buzz alluded to, is that all ampersands, even if already properly html-ized, will be matched, resulting in things like htmlentities("&amp;") == "&amp;amp;" and htmlentities(htmlentities("<")) == "&amp;lt;" (not that you’d do the latter, but just to illustrate the point). You want to pad the ampersand regex. Just a space will work for most cases, i.e.:

    s.replace(/& /g, '&amp; ')

    or you can get fancier with something along the lines of:

    s.replace(/&[^(#\d+;|a-z+;)]/g, '&amp;')
    • User Avatar
      James
      Permalink to comment#

      Why not just replace all &amp; with an & as the first replace method? This solves the problem of double-encoding ampersands.

      return String(str).replace(/&amp;/g, '&').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
      

      This works for me quite well.

    • User Avatar
      Francescomm

      There is no problem with this: that behaviour is totally correct.

      If you use PHP own htmlentities(‘Me & myself’) it will correctly return ‘Me &amp; myself’. And that is the correct way to code in HTML if you want the text ‘Me & myself’ (as it is) to appear on the page.

      And if you encode it again, it will become ‘Me &&amp; myself’, and this too is correct.

      “Even if already properly html-ized” is a total nonsense.

      If an instructional page wants to show you how to write entities and wants & to appear on the page, it has to write & for the & and then ‘amp;’ as it is, so the HTML code becomes &amp; and that is it.

      The fact that & was “already properly html-ized” in your mind makes no diffrence for the HTML code and parser…

  8. User Avatar
    Jay
    Permalink to comment#

    How does one do the opposite of this? I want to show the interpreted html entity in js. Example:

    
    $(function(){
        $("#demo").formwizard({ 
            textNext: 'Go to step two »'
            }
    );
    
    

    Would like ‘textNext’ to output as Go to step two »

  9. User Avatar
    Pimm Hogeling
    Permalink to comment#

    Please note that this doesn’t do the same as the PHP function. The PHP function uses HTML entities; while this function uses XML ones.

    For example, this function leaves Orléans unaltered, while the PHP function turns that string into Orl&eacute;ans.

  10. User Avatar
    Shilpa
    Permalink to comment#

    Helped me a lot… krEncodeEntities, krDencodeEntities solved my problem…

  11. User Avatar
    KrishnaTorque
    Permalink to comment#

    function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g,'&apos');
    }

    Thank you for this script. I have added this .replace(/'/g,'&apos') end of the line. Maybe it will be help

  12. User Avatar
    hasan gilak
    Permalink to comment#

    check out this code plz

    $(“body”).text($(“body”).html());

    one line code ;)

  13. User Avatar
    Mathias Bynens

    The solution Chris posted here works fine.

    However, some of the comments on this page discuss extended implementations that not only escape unsafe characters, but also encode any non-ASCII characters. I just want to say: encoding/decoding HTML entities in JavaScript is harder than it seems.

    Here’s a list of common problems in HTML entity encoding/decoding scripts. All the solutions linked to in the comments have at least one of the issues mentioned there. My he library handles all these things perfectly.

  14. User Avatar
    Thirunavukkarasu

    This tricked saved my day! Thanks for the simple solution !

  15. User Avatar
    Digital Defense
    Permalink to comment#

    I was going to recommend the excellent he library (written by Mathias Bynens), but I see Mathias already took care of that himself. Unless you’re 100% sure the string you need to encode does not contain any special characters, the he library is the only way to go.

  16. User Avatar
    q bonito
    Permalink to comment#

    excellent Krinkle!!!!!!! use your comment

  17. User Avatar
    Zhao Xin
    Permalink to comment#

    I think we no need to encode the & and ” and ‘.
    We just need to encode <, >, space and TAB.
    And I heard, Numbered HtmlEntity Code is more supported, so…
    My code is below.

    String.prototype.enHtmlEntity = function(){return enHtmlEntity(this);};
    String.prototype.deHtmlEntity = function(){return deHtmlEntity(this);};

    /**
    * HTML字符串编码为实体字符串
    * @author Zhao Xin
    * @email zhaoxin@imzhao.com
    * @param {String} str HTML普通字符串
    * @return {String} HTML实体字符串
    */
    function enHtmlEntity(str){
    return String(str).replace(//g, ‘>’)
    .replace(/[ ]/g, ‘ ’)
    .replace(/\t/g, ‘­’);
    } /* end of function enHtmlEntity */

    /**
    * HTML实体解码为普通字符
    * @author Zhao Xin
    * @email zhaoxin@imzhao.com
    * @param {String} str HTML实体字符串
    * @return {String} HTML普通字符串
    */
    function deHtmlEntity(str){
    return String(str).replace(/\&#60\;/gi, ”)
    .replace(/\&#160\;/gi, ‘ ‘)
    .replace(/\&#173\;/gi, ‘\t’);
    } /* end of function deHtmlEntity */

  18. User Avatar
    Ryan

    Thanks for this. Quick and easy fix.

  19. User Avatar
    Nikita
    Permalink to comment#

    This function replaces most common character names and all character numbers.

    function htmlDecode(inp){
      var replacements = {'&lt;':'<','&gt;':'>','&sol;':'/','&quot;':'"','&apos;':'\'','&amp;':'&','&laquo;':'«','&raquo;':'»','&nbsp;':' ','&copy;':'©','&reg;':'®','&deg;':'°'
                         };
      for(var r in replacements){
        inp = inp.replace(new RegExp(r,'g'),replacements[r]);
      }
      return inp.replace(/&#(\d+);/g, function(match, dec) {
        return String.fromCharCode(dec);
      });
    }
    

    (last version)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag