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

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);}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Text node
Option node
Replace A
Replace B
Replace C

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

Let's dive into the world of JavaScript microbenchmarks!

Benchmark Overview

The provided JSON represents a benchmarking test case named "Escape HTML regex vs replace vs textNode vs Option 4". The test aims to compare the performance of four different approaches for escaping HTML characters in a string.

Escaping HTML Characters

In HTML, certain characters have special meanings. To prevent XSS (Cross-Site Scripting) attacks, these characters need to be escaped. Escaping involves replacing these characters with their corresponding HTML entities.

There are several ways to escape HTML characters:

Regex replacement: This method uses regular expressions to replace special characters with their HTML entities.
Replace: This method uses the replaceAll() function to replace special characters with their HTML entities.
Text node: This approach involves creating a text node in an XML document and setting its text content to the original string, then escaping the character using DOM methods.
Option node: This approach creates an Option element and sets its label attribute to the original string, then escaping the character using DOM methods.

Comparison of Approaches

Approach	Description	Pros	Cons
Regex Replacement	Uses regular expressions to replace special characters with their HTML entities.	Fast and flexible, can handle complex replacements.	Overhead of creating a regex pattern, may not be as efficient for simple replacements.
Replace	Uses the `replaceAll()` function to replace special characters with their HTML entities.	Simple and straightforward, easy to understand.	May not be as fast as regex replacement for complex replacements, limited control over replacement logic.
Text Node	Creates a text node in an XML document and sets its text content to the original string, then escaping the character using DOM methods.	Can handle complex replacements, uses native DOM methods.	May have overhead due to creating an XML document, not as fast as regex replacement or replace.
Option Node	Creates an Option element and sets its label attribute to the original string, then escaping the character using DOM methods.	Can handle complex replacements, uses native DOM methods.	May have overhead due to creating an HTML element, not as fast as regex replacement or replace.

Library: DOM Methods

The test case uses DOM methods (e.g., append(), innerHTML) for the Text Node and Option Node approaches. These methods are built into the browser's JavaScript engine and provide a way to manipulate HTML documents.

Special JS Feature/Syntax: None

There are no special JavaScript features or syntax used in this benchmark.

Other Alternatives

Some alternative approaches for escaping HTML characters include:

Using a dedicated library: There are libraries like DOMPurify that provide a simple and efficient way to escape HTML characters.
Using a custom implementation: A developer can write their own function to escape HTML characters, which can be optimized for performance.

In summary, the benchmark provides an interesting comparison of different approaches for escaping HTML characters in JavaScript. The choice of approach depends on the specific requirements of the project, such as performance, simplicity, and control over replacement logic.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

**Escaping HTML Characters**

There are several ways to escape HTML characters:

1.  **Regex replacement**: This method uses regular expressions to replace special characters with their HTML entities.
2.  **Replace**: This method uses the `replaceAll()` function to replace special characters with their HTML entities.
3.  **Text node**: This approach involves creating a text node in an XML document and setting its text content to the original string, then escaping the character using DOM methods.
4.  **Option node**: This approach creates an Option element and sets its label attribute to the original string, then escaping the character using DOM methods.

**Comparison of Approaches**

| Approach | Description | Pros | Cons |
| --- | --- | --- | --- |
| Regex Replacement | Uses regular expressions to replace special characters with their HTML entities. | Fast and flexible, can handle complex replacements. | Overhead of creating a regex pattern, may not be as efficient for simple replacements. |
| Replace | Uses the `replaceAll()` function to replace special characters with their HTML entities. | Simple and straightforward, easy to understand. | May not be as fast as regex replacement for complex replacements, limited control over replacement logic. |
| Text Node | Creates a text node in an XML document and sets its text content to the original string, then escaping the character using DOM methods. | Can handle complex replacements, uses native DOM methods. | May have overhead due to creating an XML document, not as fast as regex replacement or replace. |
| Option Node | Creates an Option element and sets its label attribute to the original string, then escaping the character using DOM methods. | Can handle complex replacements, uses native DOM methods. | May have overhead due to creating an HTML element, not as fast as regex replacement or replace. |

**Library: DOM Methods**

The test case uses DOM methods (e.g., `append()`, `innerHTML`) for the Text Node and Option Node approaches. These methods are built into the browser's JavaScript engine and provide a way to manipulate HTML documents.

**Special JS Feature/Syntax: None**

There are no special JavaScript features or syntax used in this benchmark.

**Other Alternatives**

Some alternative approaches for escaping HTML characters include:

1.  **Using a dedicated library**: There are libraries like DOMPurify that provide a simple and efficient way to escape HTML characters.
2.  **Using a custom implementation**: A developer can write their own function to escape HTML characters, which can be optimized for performance.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result