Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
strip html v2
(version: 0)
Comparing performance of:
replace vs createContextualFragment vs innerHTML
Created:
5 years ago
by:
Guest
Go to the latest result
Tests:
replace
var strippedHtml = ("<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>").replace(/<[^>]+>/g, '');
createContextualFragment
var strippedHtml = (document.createRange().createContextualFragment("<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>").textContent || '');
innerHTML
var a = document.createElement("div"); a.innerHTML = "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>" var strippedHtml = a.textContent;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
replace
createContextualFragment
innerHTML
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/136.0.0.0 Safari/537.36
Browser/OS:
Chrome 136 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=607505" width="100%" height="500px"></iframe>
replace
8.5M/s
createContextualFragment
284K/s
innerHTML
5K/s
View exact numbers
Test name
Executions per second
✓
replace
8,549,035 Ops/sec
createContextualFragment
284,126 Ops/sec
innerHTML
4,805 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and its test cases. **Benchmark Overview** The benchmark measures the performance of three different approaches to strip HTML from a string in JavaScript: 1. **Replace**: Replaces all HTML tags with an empty string using a regular expression. 2. **createContextualFragment**: Creates a DOM fragment from the input HTML, extracts the text content, and then returns it. 3. **innerHTML**: Sets the inner HTML of a temporary `<div>` element to the input HTML and then extracts the text content. **Comparison of Approaches** 1. **Replace**: * Pros: Simple, efficient, and widely supported in JavaScript engines. * Cons: May not work correctly with malformed or malformed HTML, and can lead to security issues if used with user-input data. 2. **createContextualFragment**: * Pros: Provides a more precise way of extracting text content from DOM fragments, which is especially useful when dealing with nested HTML structures. * Cons: Requires creating temporary DOM elements, which can incur additional overhead and might not be supported in older JavaScript engines. 3. **innerHTML**: * Pros: Convenient and widely supported, as it's a built-in method of the `DOMElement` interface. * Cons: May lead to security issues if used with user-input data (e.g., creating malicious `<div>` elements), and can be slower than pure string manipulation methods due to DOM creation overhead. **Library and Special JS Features** The benchmark doesn't explicitly use any external libraries, but it does utilize the `createRange()` method from the JavaScript DOM API. This method is supported by most modern browsers but may not work in older versions or in certain environments where the DOM is not fully implemented. There are no special JS features used in this benchmark that would require advanced knowledge of JavaScript syntax. **Alternative Approaches** Other approaches to stripping HTML from a string could include: * Using `DOMParser` and `XMLSerializer` to parse the input HTML into a DOM document, extracting the text content, and then converting it back to a string. * Utilizing libraries like DOMPurify or html-minifier for more advanced HTML cleaning and minification tasks. * Implementing custom, hand-rolled parsing logic using regular expressions or other string manipulation techniques. Keep in mind that these alternatives might not provide significant performance benefits over the three benchmarked approaches, especially when considering security and compatibility factors.
Related benchmarks
innerHTML vs removeChild
innerHTML vs. removeChild vs. jQuery.html() vs. replaceChildren
Comments
Confirm delete:
Do you really want to delete benchmark?