javascripthtmlescapinghtml-encode

What is the HtmlSpecialChars equivalent in JavaScript?


Apparently, this is harder to find than I thought it would be. And it even is so simple...

Is there a function equivalent to PHP's htmlspecialchars built into JavaScript? I know it's fairly easy to implement that yourself, but using a built-in function, if available, is just nicer.

For those unfamiliar with PHP, htmlspecialchars translates stuff like <htmltag/> into &lt;htmltag/&gt;

I know that escape() and encodeURI() do not work this way.


Solution

  • There is a problem with your solution code--it will only escape the first occurrence of each special character. For example:

    escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
    Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
    Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here
    

    Here is code that works properly:

    function escapeHtml(text) {
      return text
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#039;");
    }
    

    Update

    The following code will produce identical results to the above, but it performs better, particularly on large blocks of text (thanks jbo5112).

    function escapeHtml(text) {
      var map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
      };
      
      return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }