Strip HTML from a given text
1. Get text content from a fake element (not recommended)
const stripHtml = function (html) {
const ele = document.createElement('div');
ele.innerHTML = html;
return ele.textContent || '';
};
This approach isn't recommended because it can cause a security issue if the input html consists of special tags, such as
<script>. However, we can prevent the html from being executed by replacing the div tag with textarea:
const stripHtml = function (html) {
const ele = document.createElement('textarea');
ele.innerHTML = html;
return ele.textContent || '';
};
2. Use DOMParser
const stripHtml = function (html) {
const doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || '';
};
3. Use template
The
<template> tag holds a HTML content that is not to be rendered immediately. However, this is not supported on older browser such as IE 11.
const stripHtml = function (html) {
const ele = document.createElement('template');
ele.innerHTML = html;
return ele.content.textContent || '';
};
See also