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

Script Preparation code:

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); }
Option node
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 = [ ['&', '&'], ['<', '<'], ['>', '>'], ["'", '''], ['"', '"'], ]; 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('&', '&') .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(htmlStr); }
Replace C
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

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: 5 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Text node	329.0 Ops/sec
Option node	1558.7 Ops/sec
Replace A	2748.8 Ops/sec
Replace B	249.2 Ops/sec
Replace C	118.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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:

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.

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.

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: 2 years ago by: Guest

Jump to the latest result

Text node

Option node

Replace A

Replace B

Replace C

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):