Benchmark: Escape HTML regex vs replace vs textNode vs Option

Script Preparation code:

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

Tests:

Text node
const escapeElement = document.createElement('span'); const escapeTextNode = document.createTextNode(''); function escape(str) { escapeTextNode.textContent = str; return escapeElement.innerHTML; } let i = 0; for (; i < 10000; i++) { escape(html); }
Option node
const option = new Option(''); function escape(str) { option.label = str; return option.label; } let i = 0; for (; i < 10000; i++) { escape(html); }
Replace A
function escape(str) { const E = [ ['&', '&'], ['<', '<'], ['>', '>'], ["'", '''], ['"', '"'], ]; return (v) => E.reduce((r, e) => str.replaceAll(e[0], e[1]), v); } let i = 0; for (; i < 10000; i++) { escape(html); }
Replace B
function escape(str) { return str.replaceAll('&', '&') .replaceAll('<', '<') .replaceAll('>', '>') .replaceAll("'", ''') .replaceAll('"', '"'); return (v) => E.reduce((r, e) => str.replaceAll(e[0], e[1]), v); } let i = 0; for (; i < 10000; i++) { escape(html); }
Replace C
function escape(str) { return ('' + str).replace(/[^\w. ]/gi, c => '&#' + c.charCodeAt(0) + ';') } let i = 0; for (; i < 10000; i++) { escape(html); }

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

This benchmark does not have any results yet. Be the first one to run it!

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