Run results for: Escape HTML regex vs replace vs textNode vs Option 4

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser: Chrome 123

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Text node	95.6 Ops/sec
Option node	155.6 Ops/sec
Replace A	736.0 Ops/sec
Replace B	76.1 Ops/sec
Replace C	45.1 Ops/sec

Script Preparation code:

window.htmlStr = `<div>
	<input name="test" value="test" />
    <img />
</div>`;

AخA
 
window.htmlStr = `<div>    <input name="test" value="test" />    <img /></div>`;

Tests:

Text node

const escapeElement = document.createElement('span');
const escapeTextNode = document.createTextNode('');
escapeElement.append(escapeTextNode);
function escape(str) {
  escapeTextNode.textContent = str;
  return escapeElement.innerHTML;
}

let i = 0;
for (; i < 10000; i++) {
  escape(htmlStr);
}

​x
 
const escapeElement = document.createElement('span');const escapeTextNode = document.createTextNode('');escapeElement.append(escapeTextNode);function escape(str) {  escapeTextNode.textContent = str;  return escapeElement.innerHTML;}​let i = 0;for (; i < 10000; i++) {  escape(htmlStr);}

Option node

const option = new Option('');
function escape(str) {
  option.label = str;
  return option.label;
}

let i = 0;
for (; i < 10000; i++) {
  escape(htmlStr);
}

 
const option = new Option('');function escape(str) {  option.label = str;  return option.label;}​let i = 0;for (; i < 10000; i++) {  escape(htmlStr);}

Replace A

function escape(str) {
  const E = [
    ['&', '&amp;'],
    ['<', '&lt;'],
    ['>', '&gt;'],
    ["'", '&apos;'],
    ['"', '&quot;'],
  ];

  return (v) => E.reduce((r, e) => str.replaceAll(e[0], e[1]), v);
}

let i = 0;
for (; i < 10000; i++) {
  escape(htmlStr);
}

 
function escape(str) {  const E = [    ['&', '&amp;'],    ['<', '&lt;'],    ['>', '&gt;'],    ["'", '&apos;'],    ['"', '&quot;'],  ];​  return (v) => E.reduce((r, e) => str.replaceAll(e[0], e[1]), v);}​let i = 0;for (; i < 10000; i++) {  escape(htmlStr);}

Replace B

function escape(str) {
  return str.replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll("'", '&apos;')
    .replaceAll('"', '&quot;');

  return (v) => E.reduce((r, e) => str.replaceAll(e[0], e[1]), v);
}

let i = 0;
for (; i < 10000; i++) {
  escape(htmlStr);
}

 
function escape(str) {  return str.replaceAll('&', '&amp;')    .replaceAll('<', '&lt;')    .replaceAll('>', '&gt;')    .replaceAll("'", '&apos;')    .replaceAll('"', '&quot;');​  return (v) => E.reduce((r, e) => str.replaceAll(e[0], e[1]), v);}​let i = 0;for (; i < 10000; i++) {  escape(htmlStr);}

Replace C

function escape(str) {
  return ('' + str).replace(/[^\w. ]/gi, c => '&#' + c.charCodeAt(0) + ';')
}

let i = 0;
for (; i < 10000; i++) {
  escape(htmlStr);
}

 
function escape(str) {  return ('' + str).replace(/[^\w. ]/gi, c => '&#' + c.charCodeAt(0) + ';')}​let i = 0;for (; i < 10000; i++) {  escape(htmlStr);}