How to Strip HTML from a String in JavaScript

In the scope of this tutorial, we are going to show two approaches to stripping an HTML from a string in JavaScript.

The function can execute inline JavaScript codes:

Watch a course JavaScript -The Complete Guide (Beginner + Advanced)

Javascript strip HTML from a string
function stripHtml(html) { // Create a new div element let temporalDivEl = document.createElement("div"); // Set HTML content using provider temporalDivEl.innerHTML = html; // Get the text property of the element (browser support) return temporalDivEl.textContent || temporalDivEl.innerText || ""; } let htmlString = "<div><h1>Welcome to W3Docs.</h1>\n<p>It's a Javascript book.</p></div>"; console.log(stripHtml(htmlString));

If you are running in a browser, it is best to use DOMParser:

function strip(html) {
  let doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.body.textContent || "";
}

If you are running in browser to test the inline JavaScript, use the following code:

Javascript strip HTML from a string inline
function strip(html) { // Create a new div element let temporalDivEl = document.createElement("div"); // Set HTML content using provider temporalDivEl.innerHTML = html; // Get the text property of the element (browser support) return temporalDivEl.textContent || temporalDivEl.innerText || ""; } strip("<img onerror='console.log(\"can run arbitrary JS here\")' src=bogus>")

Also, it does not request resources on parse, for example images:

Javascript strip HTML from a string inline
function strip(html) { // Create a new div element let temporalDivEl = document.createElement("div"); // Set HTML content using provider temporalDivEl.innerHTML = html; // Get the text property of the element (browser support) return temporalDivEl.textContent || temporalDivEl.innerText || ""; } console.log(strip("Just text <img src='https://ru.w3docs.com/uploads/media/default/0001/05/2c669e35c4c5867094de4bed65034d0cac696df5.png'>"));
This solution works only in browser.

DOMParser

The DOMParser interface allows parsing XML or HTML source code from a string into a DOM Document. XMLHttpRequest parses XML and HTML directly from a URL-addressable resource and returns a Document in its response property.