Info

Speed test escaping html characters with if statements and regular expressions.

Preparation code

 
<script>
  Benchmark.prototype.setup = function() {
    function encodeWithIfs(str) {
      var result = ""
      for (var cc = 0; cc < str.length; cc++) {
        var c = str.charAt(cc)
        if (c == "&") result += '&amp;'
        else if (c == '"') result += '&quot;'
        else if (c == "'") result += '&#39;'
        else if (c == "<") result += '&lt;'
        else if (c == ">") result += '&gt;'
        else result += c
      }
      return result
    }
    
    function endcodeWithRegEx(str) {
      return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    }
    
    function endcodeWithRegEx2(str) {
      return str.replace(/[&<>"'`]/g, function (chr) {
        return '&#' + chr.charCodeAt(0) + ';'
      })
    }
    
    function encodeWithSwitchAndArray(str) {
      for (var
        result = str.split(""),
        i = 0, length = result.length;
        i < length; i++
      ) {
        switch(result[i]) {
          case "&": result[i] = "&amp;"; break;
          case '"': result[i] = "&quot;"; break;
          case "'": result[i] = "&#39;"; break;
          case "<": result[i] = "&lt;"; break;
          case ">": result[i] = "&gt;"; break;
        }
      }
      return result.join("");
    }
    
    function encodeWithSwitch(str) {
      for (var
        c,
        result = "",
        i = 0, length = str.length;
        i < length; i++
      ) {
        switch(c = str.charCodeAt(i)) {
          case "&": c = "&amp;"; break;
          case '"': c = "&quot;"; break;
          case "'": c = "&#39;"; break;
          case "<": c = "&lt;"; break;
          case ">": c = "&gt;"; break;
        }
        result += c;
      }
      return result;
    }
    
    var encodeWithRegExpAndObject = function (re, o) {
      function place(m) {
        return o[m];
      }
      return function (str) {
        return str.replace(re, place);
      };
    }(
      /[&"'<>]/g,
      {"&":"&amp;", '"':"&quot;", "'":"&#39;", "<":"&lt;", ">":"&gt;"}
    );
    
    // NOTE: this isn't very portable; Chrome encodes ", ', < and > but not &;
    // Firefox, at least in the past (see https://bugzilla.mozilla.org/649818) // doesn't encode either, other browsers likely are variably better/worse.
    // The chaos of the pre-DOM0 days still shows in these vestigial functions
    function encodeWithStringPrototype(str) {
      return ''.link(str).slice(9,-6).replace(/&/g, '&amp;');
    }
    
    function doEncode(func) {
      var a = func("<div></div>")
      var b = func("This is a string with no replacements")
      var c = func("All replacement chars & \" ' < >")
    }
  };
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

doEncode(encodeWithIfs)

doEncode(endcodeWithRegEx)

doEncode(endcodeWithRegEx2)

doEncode(encodeWithSwitchAndArray)

doEncode(encodeWithSwitch)

doEncode(encodeWithRegExpAndObject);

doEncode(encodeWithStringPrototype);

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Dan Rzeppa on 3rd May 2012
• Revision 2: published by Dan Rzeppa on 10th June 2012
• Revision 3: published by WebReflection on 10th August 2012
• Revision 4: published by Johan Sundström on 11th October 2012
• Revision 5: published on 27th October 2012
• Revision 8: published by Eamon Nerbonne on 30th November 2012
• Revision 9: published by Eamon Nerbonne on 1st December 2012
• Revision 10: published by Dan Rzeppa on 27th December 2012
• Revision 11: published by Dan Rzeppa on 20th February 2013

0 comments