How can I remove HTML tags from a string in JavaScript?
Antek N

To remove HTML tags from a string in JavaScript, you can use various approaches depending on your requirements and the specific scenario you're working with. Here are a few methods commonly used: 1. Regular Expressions: Regular expressions are a powerful tool for pattern matching and manipulation in strings. You can use them to match and remove HTML tags. Here's an example:

1
2
3
4
5
6
7
8

function removeHTMLTags(str) {
  return str.replace(/<[^>]*>/g, '');
}

const htmlString = '<p>Hello, <b>world</b>!</p>';
const cleanedString = removeHTMLTags(htmlString);
console.log(cleanedString); // Output: Hello, world!

In this example, theremoveHTMLTags function uses thereplace method with a regular expression/<[^>]*>/g to match any HTML tags (...) and replaces them with an empty string. 2. DOM Parsing: If you're working with HTML strings and want a more comprehensive solution, you can utilize the DOM (Document Object Model) to parse and manipulate the HTML. Here's an example:

1
2
3
4
5
6
7
8
9
10

function removeHTMLTags(str) {
  const div = document.createElement('div');
  div.innerHTML = str;
  return div.textContent || div.innerText || '';
}

const htmlString = '<p>Hello, <b>world</b>!</p>';
const cleanedString = removeHTMLTags(htmlString);
console.log(cleanedString); // Output: Hello, world!

In this approach, theremoveHTMLTags function creates a newdiv element, sets itsinnerHTML to the input string, and then retrieves the text content using thetextContent property or theinnerText property. This method effectively removes any HTML tags and returns the plain text. 3. Third-Party Libraries: Another option is to use third-party libraries like DOMPurify or jQuery, which provide additional features for sanitizing HTML and removing tags. These libraries can be useful if you're working with complex HTML and need more advanced functionality. Here's an example using DOMPurify:

1
2
3
4
5
6
7
8
9
10

// Assuming you have included the DOMPurify library
function removeHTMLTags(str) {
  const cleanedString = DOMPurify.sanitize(str, { ALLOWED_TAGS: [] });
  return cleanedString;
}

const htmlString = '<p>Hello, <b>world</b>!</p>';
const cleanedString = removeHTMLTags(htmlString);
console.log(cleanedString); // Output: Hello, world!

In this example, theDOMPurify.sanitize method is used with an empty array forALLOWED_TAGS, effectively removing all HTML tags from the input string. Remember to choose the method that best suits your specific needs and consider the potential security implications, especially if dealing with user-generated content.

Similar Questions