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

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('"', '"'); } 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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
Text node	111.8 Ops/sec
Option node	167.6 Ops/sec
Replace A	909.3 Ops/sec
Replace B	89.4 Ops/sec
Replace C	54.4 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark for you.

**Overview**

The benchmark compares four different approaches to escape HTML in JavaScript:

1. Text Node
2. Option Node
3. Replace A (using `replaceAll` with multiple conditions)
4. Replace B (using `replace` with regular expression)

Each approach has its pros and cons, which I'll explain below.

**Test Cases**

Let's go through each test case:

### 1. Text Node

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

**Pros:** This approach creates a temporary text node and appends it to an element. The `escape` function updates the `textContent` of the text node, which is then used as the HTML content of the element.

**Cons:** This approach can be slower due to the overhead of creating and appending nodes to the DOM.

### 2. Option Node

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

**Pros:** This approach uses the `Option` object, which is a built-in HTML element. It's lightweight and doesn't require creating additional nodes.

**Cons:** This approach can be slower due to the overhead of accessing the `label` property of an `Option` object, which may not be optimized for performance.

### 3. Replace A

```javascript
function escape(str) {
  return (v) => E.reduce((r, e) => str.replaceAll(e[0], e[1]), v);
}
let i = 0;
for (; i < 10000; i++) {
  escape(htmlStr);
}
```

**Pros:** This approach uses a regular expression to replace multiple HTML entities at once. It's concise and efficient.

**Cons:** This approach assumes that the input string only contains the specified entities, which may not be the case in all scenarios.

### 4. Replace B

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

**Pros:** This approach uses a regular expression to replace all non-word characters with their corresponding HTML entities.

**Cons:** This approach assumes that the input string only contains ASCII characters, which may not be the case in all scenarios.

**Library and Special JS Features**

* No libraries are explicitly used in this benchmark.
* No special JavaScript features or syntax are mentioned.

Related benchmarks:

Escape HTML regex vs replace vs textNode vs Option 5 (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):