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:

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:

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:

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.

Do you find this helpful?

Related articles