How Can I Remove HTML Tags from Text Using Only Plain JavaScript?

Stripping HTML Tags in Plain JavaScript: A Comprehensive Exploration

Stripping HTML tags from text is a common requirement in various programming applications. While JavaScript offers several inbuilt methods and libraries to accomplish this task, this article delves into the intricate details of achieving it using pure JavaScript, without external dependencies.

In the absence of libraries like jQuery or regex-based solutions, the most straightforward approach exploits the browser's inherent capabilities to handle HTML. By creating a temporary document fragment and assigning the HTML to its innerHTML property, the browser seamlessly parses the content and returns the text without any tags.

The following JavaScript function exemplifies this approach:

function stripHtml(html) {
    let tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || "";
}

This function takes the HTML string as input and returns the plain text. However, it is crucial to note that using this method on user-generated HTML is discouraged, as it could potentially lead to malicious code execution.

For those scenarios, a safer approach involves utilizing the DOMParser, an API introduced in HTML5:

function stripHtml(html) {
    const parser = new DOMParser();
    const document = parser.parseFromString(html, "text/html");
    return document.documentElement.textContent;
}

This function employs the DOMParser to create a document object from the HTML string, then extracts the text content from the document's root element. This approach provides enhanced security and control over the input, making it suitable for handling potentially untrusted HTML.

Choosing the appropriate technique depends on the specific use case and security considerations. For most scenarios, the first approach using innerHTML offers simplicity and efficiency. However, if dealing with untrusted input, utilizing the DOMParser is recommended for added security and reliability.

The above is the detailed content of How Can I Remove HTML Tags from Text Using Only Plain JavaScript?. For more information, please follow other related articles on the PHP Chinese website!