Methods and Best Practices for Extracting Pure Text Content in JavaScript

Introduction

In modern web development, there is often a need to extract pure text from content containing HTML markup. This requirement appears in various scenarios such as content previews, search engine optimization, and text analysis. Based on practical development cases, this article deeply explores different methods for extracting pure text in JavaScript and their implementation principles.

Problem Background and Requirements Analysis

Consider the following typical scenario: an HTML paragraph containing formatted text where users want to remove all HTML tags and retain only pure text content by clicking a button. The original HTML structure is as follows:

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

The expected result is to convert the content containing <span class="A">, <span class="B">, and <span class="C"> tags into pure text "I am working in ABC company."

Solution Comparison and Analysis

Method One: Regular Expression Replacement

Early developers often used regular expressions to remove HTML tags. While this approach seems straightforward, it has several issues:

function get_content() {
  var html = document.getElementById("txt").innerHTML;
  document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, "");
}

The disadvantages of this method include: potential errors when processing complex HTML structures, inability to properly handle nested tags, relatively lower performance, and possible accidental removal of content that should be preserved.

Method Two: DOM Property Access (Recommended)

A more elegant solution utilizes the built-in properties of DOM elements:

function gabi_content() {
  var element = document.getElementById('txt');
  element.innerHTML = element.innerText || element.textContent;
}

This method leverages the browser's native text extraction capabilities, making it more reliable and efficient.

Core Properties Deep Analysis

Differences Between innerText and textContent

Although innerText and textContent have similar functions, they have important differences in implementation mechanisms and application scenarios:

innerText Characteristics:

• Returns rendered text content, approximating what users see when selecting and copying
• Considers CSS style influences; content of hidden elements is not included
• Preserves text line breaks and spacing formats
• Compatible with older IE browsers

textContent Characteristics:

• Returns text content of all child nodes, including hidden elements
• Does not consider CSS styles; purely extracts text from DOM structure
• Typically performs better than innerText
• Complies with W3C standards; recommended for modern browsers

Code Optimization and Best Practices

Simplified Version Implementation

Utilizing JavaScript's global namespace features, the code can be further simplified:

function txt_content() {
  txt.innerHTML = txt.innerText || txt.textContent;
}

This approach takes advantage of the feature where element IDs automatically become global variables, making the code more concise.

Compatibility Handling

To ensure cross-browser compatibility, it's recommended to use the logical OR operator to select the appropriate property:

var text = element.innerText || element.textContent;

This writing style ensures that innerText is used in browsers that support it, while falling back to textContent in browsers that don't.

Performance Analysis and Selection Recommendations

In actual projects, the choice of method should consider the following factors:

• Performance Requirements: textContent is typically faster than innerText and regex replacement
• Compatibility Requirements: If support for older IE versions is needed, innerText is a better choice
• Content Accuracy: Use innerText for precise rendered text; use textContent for complete DOM text

Extended Applications and Related Technologies

Similar text processing techniques have wide applications in areas such as content formatting and data cleaning. Referring to other technical scenarios, such as prompt engineering for preventing GPT from outputting Markdown format, we can borrow from the structured thinking: explicitly specifying output formats, using specific delimiters, adopting role-playing methods, etc. These principles are equally applicable to JavaScript text processing design.

Conclusion

When extracting pure text in JavaScript, it is recommended to prioritize using the combination of element.innerText || element.textContent. This approach ensures both compatibility and good performance. Avoid using regular expression replacement methods for HTML tags, as these methods are prone to errors and have lower efficiency. Understanding the differences between innerText and textContent helps in making the most appropriate choices in different scenarios.