Benchmark: HTML Escape textContent vs replace

Script Preparation code:

var toEscape = `ab<div id="a" class='sasa'>asa</div>`;
var result = '';

Tests:

textContent
var div = document.createElement('div'); div.textContent = toEscape; result = div.innerHTML;
replace
var map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; result = toEscape.replace(/[&<>"']/g, function(m) { return map[m]; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
replace

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
textContent	1043360.6 Ops/sec
replace	1387305.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark compares the performance of two approaches to escape HTML text: `textContent` and `replace`. The goal is to determine which approach is faster.

**Script Preparation Code**

The script preparation code sets up a variable `toEscape` with some HTML content, specifically an innerHTML-escaped string containing `<div>` elements. This is used as the input for both test cases.

**Html Preparation Code**

There is no HTML preparation code provided in this benchmark definition.

**Test Cases**

There are two individual test cases:

### 1. `textContent`

This test case creates a new `div` element using `document.createElement('div')`, sets its `textContent` property to the escaped string, and then assigns the result of `div.innerHTML` to the variable `result`.

```javascript
var div = document.createElement('div');
div.textContent = toEscape;
result = div.innerHTML;
```

**Pros:**

* Simple and easy to understand.
* Does not rely on complex regular expressions.

**Cons:**

* May involve more overhead due to creating a new element, setting its text content, and then parsing its innerHTML.

### 2. `replace`

This test case uses the `replace()` method with a regular expression to escape the HTML string. The regular expression `(/[&<>\"']/g)` matches any of the characters `&`, `<`, `>`, `"`, or `'` in a global manner (`g`). The callback function returns the escaped character using an object map.

```javascript
var map = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#039;'
};
result = toEscape.replace(/[&<>\"']/g, function(m) { return map[m]; });
```

**Pros:**

* More efficient than `textContent` since it avoids creating a new element.
* More flexible for escaping other types of characters.

**Cons:**

* Requires an object map, which can be complex and harder to understand.
* May involve more overhead due to regular expression matching.

**Library Usage (None)**

There are no libraries used in this benchmark definition.

**Special JS Features/Syntax (None)**

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

**Alternative Approaches**

Other alternatives for escaping HTML text include:

1. Using a library like jQuery's `html()` method, which automatically escapes special characters.
2. Implementing a custom escape function using a loop and string manipulation.
3. Using a template engine like Handlebars or Pug to escape strings.

These approaches may have different trade-offs in terms of performance, complexity, and maintainability. The choice of approach depends on the specific use case and requirements.

Related benchmarks:

HTML Escape textContent vs replace (version: 0)

Comparing performance of: textContent vs replace

Created: 2 years ago by: Guest

Jump to the latest result

textContent

replace

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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