JavaScript removing HTML tags

I recently needed to remove all HTML tags from the text content of my application to return clean text.

In this case, it was to share a plain text version for meta descriptions. It can also be used for several other outputs.

Today I’ll show you how to remove HTML tags in Javascript.

I’ll show you two ways of removing HTML tags from a string. I want to note that when you accept user input, you should always opt for a more secure server-side check.

1. JS remove HTML tags with innerHTML permalink

One method is to create a temporary HTML element and get the innerText from it.

const original = `<h1>Welcome to my blog</h1>
<p>Some more content here</p><br /><img alt="a > 2" src="img.jpg" />`;

let removeHTML = (input) => {
  let tmp = document.createElement('div');
  tmp.innerHTML = input;
  return tmp.textContent || tmp.innerText || '';
};
console.log(removeHTML(original));

This will result in the following:

'Welcome to my blog
Some more content here'

As you can see, we removed every HTML tag, including an image, and extracted the text content.

2. JS Remove HTML tags with regex permalink

My favorite for my applications is using a regex match. It’s a cleaner solution, and I trust my inputs to be valid HTML.

How it works:

const original = `<h1>Welcome to my blog</h1>
<p>Some more content here</p><br /><img src="img.jpg" />`;

const regex = original.replace(/<[^>]*>/g, '');
console.log(regex);

This will result in:

'Welcome to my blog
Some more content here'

As you can see, we removed the heading, paragraph, break, and image. This is because we escape all HTML brackets with < > format.

It could be breached by something silly like:

const original = `<h1>Welcome to my blog</h1>
<p>Some more content here</p><br /><img alt="a > 2" src="img.jpg" />`;

I know it’s not valid HTML anyhow, and one should use > for this.

But running this will result in:

'Welcome to my blog
Some more content here 2" src="img.jpg" />'

It’s just something to be aware of.

Try the example code on Codepen permalink

You can try out the code of both methods in this Codepen:

See the Pen Exyqbqa by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter