Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
ddddkkk
(version: 0)
Comparing performance of:
replace vs createContextualFragment vs innerHTML
Created:
4 years ago
by:
Guest
Jump 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
function convertToPlain(html){ var tempDivElement = document.createElement("div"); tempDivElement.innerHTML = html; return tempDivElement.textContent || tempDivElement.innerText || ""; } var htmlString= "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>"; var strippedHtml = convertToPlain(convertToPlain);
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:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing the performance of different approaches for various tasks. The provided benchmark definition and test cases demonstrate three alternative methods for stripping HTML tags from a string: 1. `replace()` method 2. `createContextualFragment` method (introduced in Internet Explorer 8) 3. Custom implementation using `innerHTML` **Testing What's Tested** The testing measures the performance of each approach in removing HTML tags from an input string. The benchmark prepares an example HTML string and then applies one of the three methods to remove the tags. **Comparison of Approaches** ### replace() method This is a built-in JavaScript method that replaces all occurrences of a pattern with another value. In this case, it's used to remove HTML tags by replacing them with an empty string. Pros: * Fast and efficient * Widely supported across browsers Cons: * May not work correctly for complex or nested HTML structures * Can be slow if the input string is very large ### createContextualFragment method This method was introduced in Internet Explorer 8 as a way to create a contextually fragment of an HTML document. In this benchmark, it's used to remove HTML tags by taking the text content of the created fragment. Pros: * Efficient and fast for simple HTML structures * Works correctly for nested HTML structures Cons: * Only supported in older browsers (Internet Explorer 8 and later) * May not work correctly in modern browsers that have replaced `createContextualFragment` with `textContent` ### Custom implementation using innerHTML This custom implementation creates a temporary `<div>` element, sets its `innerHTML` property to the input HTML string, and then returns the text content of the element. Pros: * Fast and efficient * Works correctly for complex or nested HTML structures Cons: * Requires more code than the other two approaches * May be slower than the built-in `replace()` method **Other Considerations** * The benchmark uses a custom JavaScript string literal syntax (`"..."`) to define the input HTML string. This is not a standard way of defining strings in JavaScript, but it's commonly used for this purpose. * The benchmark does not test the security implications of using these methods, as they are generally considered safe. **Alternative Approaches** Other approaches that could be tested on MeasureThat.net include: * Using regular expressions to remove HTML tags * Using a library like DOMPurify or js-xss to sanitize the input HTML string * Comparing the performance of different parser libraries (e.g., DOMParser, XMLParser) These additional tests would provide a more comprehensive understanding of the performance and security characteristics of these approaches.
Related benchmarks:
Lodash vs Reduce
Lodash vs Ramda vs Underscore 1.9.0
Lodash vs Ramda vs Underscore 1.9.0
Lodash vs Ramda vs Underscore 1.5.2
Lodash vs Ramdasdfsdf
Comments
Confirm delete:
Do you really want to delete benchmark?