Methods and Implementation of Stripping HTML Tags Using Plain JavaScript

Introduction

In modern web development, processing HTML strings and extracting plain text content is a common requirement. Whether for user input filtering, content display optimization, or data preprocessing, HTML tag removal plays a crucial role. Native JavaScript provides multiple implementation approaches, each with specific application scenarios and considerations.

DOM Parser Method

Using DOMParser represents the safest and most reliable approach for HTML tag stripping. This method leverages the browser's built-in HTML parsing capabilities to properly handle various complex HTML structures while avoiding potential security risks.

function stripHtml(html) {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    return doc.body.textContent || '';
}

The core of this implementation involves creating a DOMParser instance to parse the HTML string into a DOM document object. By accessing the textContent property of the document body, all text node content can be retrieved while automatically ignoring all HTML tags. The primary advantage of this method lies in its security—it does not execute JavaScript code within the HTML nor load external resources.

Temporary DOM Element Method

Another common implementation approach involves creating temporary DOM elements, which was more prevalent in earlier browsers:

function stripHtmlLegacy(html) {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    return tempDiv.textContent || tempDiv.innerText || '';
}

While this method remains effective, it carries potential security vulnerabilities. When processing untrusted HTML input, inline JavaScript code may be executed. Therefore, in security-sensitive scenarios such as user input handling, the DOMParser solution should be prioritized.

Regular Expression Method

For simple HTML tag removal requirements, regular expressions offer a lightweight solution:

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

This approach offers advantages in terms of performance and implementation simplicity. However, regular expressions may lack precision when dealing with complex HTML structures, particularly when HTML contains angle brackets as text content, which can lead to false matches.

Performance and Security Comparison

In practical applications, the choice of method requires careful consideration of performance and security requirements. While the DOMParser method is relatively heavier, it provides the best security guarantees. The regular expression method offers performance advantages but requires assurance of input content standardization.

For user-generated content, strongly recommend using the DOMParser method as it effectively prevents XSS attacks. For controlled, known-safe HTML content, regular expressions can provide better performance characteristics.

Practical Application Scenarios

In scenarios such as content management systems, comment systems, and search functionality, HTML tag removal is an essential data processing step. Through appropriate implementation choices, application stability and security can be ensured.

For example, when displaying search result summaries, HTML tags need to be removed from original content, retaining only plain text. In such cases, using the DOMParser method ensures proper handling of various HTML structures.

Best Practice Recommendations

Based on practical development experience, recommend prioritizing the DOMParser method in most scenarios. It is not only secure and reliable but also capable of handling various edge cases. For scenarios with extremely high performance requirements, consider using regular expression solutions while ensuring input security.

Regardless of the chosen method, comprehensive testing should be conducted to ensure correct operation across various HTML structures. Special attention should be paid to handling edge cases such as nested tags, self-closing tags, and comments.