Benchmark: Replace className.replace vs className.replaceAll vs classList

HTML Preparation code:

<style>
  .complete1
  {
    color: green;
  }
  
  .complete2
  {
    border: 1px solid red;
  }
</style>

<div id="testDiv" class="test1 test2">Sample div</div>

Tests:

className.replace
var div = document.getElementById('testDiv'); div.className = div.className.replace('test1', 'complete1'); div.className = div.className.replace('test2', 'complete2');
classList
var div = document.getElementById('testDiv'); div.classList.replace('test1', 'complete1'); div.classList.replace('test2', 'complete1');
className.replaceAll
var div = document.getElementById('testDiv'); div.className = div.className.replaceAll('test1', 'complete1'); div.className = div.className.replaceAll('test2', 'complete2');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className.replace
classList
className.replaceAll

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.115 Safari/537.36 OPR/88.0.4412.65

Browser/OS: Opera 88 on Windows 8.1

View result in a separate tab

Test name	Executions per second
className.replace	179741.9 Ops/sec
classList	461209.8 Ops/sec
className.replaceAll	160719.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript benchmark test case on the MeasureThat.net website. The test compares three different approaches to replace class names in an HTML element: `replace()`, `replaceAll()`, and `classList.replace()`.

**Tested Options**

1. **`className.replace()`**: This method replaces all occurrences of a specified substring with another substring. In this case, it is used to replace 'test1' and 'test2' with 'complete1' and 'complete2', respectively.
	* Pros: Simple and easy to use, widely supported by most browsers.
	* Cons: Can be slower than other methods, especially for large strings.
2. **`className.replaceAll()`**: This method is similar to `replace()`, but it returns the modified string instead of modifying the original string in place. It is also used to replace 'test1' and 'test2' with 'complete1' and 'complete2', respectively.
	* Pros: More flexible than `replace()`, as it allows for chaining methods, but can be slower due to the return value.
	* Cons: Less efficient than `replace()` in most cases.
3. **`classList.replace()`**: This method is part of the Web APIs and replaces one or more class names with new ones. It is used to replace 'test1' and 'test2' with 'complete1' and 'complete2', respectively, but also removes any existing classes with those names before adding the new ones.
	* Pros: Fast and efficient, as it modifies the element's class list directly.
	* Cons: Not supported by older browsers or in some environments.

**Library Used**

None of the options require a specific JavaScript library. They are built-in methods provided by the browser or ECMAScript standard.

**Special JS Features or Syntax**

There is no use of special JavaScript features or syntax in this benchmark. The tests only focus on the performance comparison of the three replacement methods.

**Other Alternatives**

If you need to replace class names in an HTML element, other approaches could be:

1. Using `setAttribute()` and `getAttribute()`: Set the attribute 'class' using `setAttribute()` and get the value using `getAttribute()`, then parse and manipulate the string.
2. Using a library like jQuery: Use jQuery's `.addClass()` and `.removeClass()` methods to add and remove class names, respectively.

However, these alternatives may not be as efficient or straightforward as the built-in replacement methods used in this benchmark.

Related benchmarks:

Replace className.replace vs className.replaceAll vs classList (version: 0)

Comparing performance of: className.replace vs classList vs className.replaceAll

Created: 2 years ago by: Guest

Jump to the latest result

className.replace

classList

className.replaceAll

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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