Benchmark: Escape HTML regex vs replace vs textNode vs Option 3

Text node

const htmlStr = `
<div>
	<script></script>
	<input name="test" value="test" />
    <img />
</div>
`;

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 htmlStr = `
<div>
	<script></script>
	<input name="test" value="test" />
    <img />
</div>
`;

const option = new Option('');
function escape(str) {
  option.label = str;
  return option.label;
}

let i = 0;
for (; i < 10000; i++) {
  escape(htmlStr);
}

Replace A

const htmlStr = `
<div>
	<script></script>
	<input name="test" value="test" />
    <img />
</div>
`;

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

const htmlStr = `
<div>
	<script></script>
	<input name="test" value="test" />
    <img />
</div>
`;

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

const htmlStr = `
<div>
	<script></script>
	<input name="test" value="test" />
    <img />
</div>
`;

function escape(str) {
  return ('' + str).replace(/[^\w. ]/gi, c => '&#' + c.charCodeAt(0) + ';')
}

let i = 0;
for (; i < 10000; i++) {
  escape(htmlStr);
}

Escape HTML regex vs replace vs textNode vs Option 3 (version: 0)

Comparing performance of: Text node vs Option node vs Replace A vs Replace B vs Replace C

Created: 7 months ago by: Guest

Jump to the latest result

Text node

Option node

Replace A

Replace B

Replace C

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

No previous run results