Strip Html Tags from Text Using Plain Javascript

Strip HTML tags from text using plain JavaScript

When working with JavaScript, there may be instances where you need to remove HTML tags from a piece of text. Whether you’re dealing with user-generated content or extracting information from an HTML document, stripping HTML tags can be a useful operation. In this blog post, we will explore different approaches to achieve this using plain JavaScript.

Method 1: Using Regular Expressions

Regular expressions provide a powerful way to match and manipulate strings in JavaScript. We can leverage this feature to remove HTML tags from a given text. Here’s an example:

function stripHtmlTags(text) {
  return text.replace(/<[^>]+>/g, '');
}

// Usage
const htmlText = 'This is some text with HTML tags.
';
const strippedText = stripHtmlTags(htmlText);
console.log(strippedText);

The stripHtmlTags function uses the replace method along with a regular expression to match and replace HTML tags with an empty string. The regular expression /<[^>]+>/g matches any text enclosed within angle brackets and the g flag ensures that all occurrences are replaced.

The output of the above code would be:

This is some text with HTML tags.

Method 2: Using DOM manipulation

Another approach to remove HTML tags is by utilizing the DOM manipulation capabilities of JavaScript. We can create a temporary element, set the HTML content to the given text, and then retrieve the text content without the HTML tags. Here’s an example:

function stripHtmlTags(text) {
  const tempElement = document.createElement('div');
  tempElement.innerHTML = text;
  return tempElement.textContent || tempElement.innerText || '';
}

// Usage
const htmlText = 'This is some text with HTML tags.

';
const strippedText = stripHtmlTags(htmlText);
console.log(strippedText);

The stripHtmlTags function creates a div element, sets its innerHTML property to the given text, and then retrieves the text content using the textContent or innerText property. This effectively removes the HTML tags from the text.

The output of the above code would be the same as the previous method:

This is some text with HTML tags.

Both methods provide a way to strip HTML tags from text using plain JavaScript. The choice between them depends on your specific use case and preference. Regular expressions offer a concise solution, while DOM manipulation provides more control over the HTML parsing process.

Remember to choose the method that best suits your needs and always test your code with different scenarios to ensure its reliability.