How to Truncate HTML Text Without Distorting Tags?

Truncating HTML Text without Distorting Tags

The need to truncate text containing HTML while preserving the validity of tags is a common requirement in web development. However, the direct application of string truncation often leads to distorted or incomplete sections of text due to the presence of unclosed tags.

Parsing HTML for Accurate Truncation

One effective solution is to parse the HTML and carefully handle the opening and closing of tags. This ensures that the final truncated text maintains its structural integrity. Here's a step-by-step approach:

1. Track Open Tags: Maintain a stack of open tags encountered while parsing the HTML.
2. Print Text Fragments: Iterate over the HTML and print text fragments that precede any tags.
3. Handle HTML Entities and Multibyte Sequences: Entities (e.g.,
4. Process Opening Tags: When an opening tag is encountered, it is pushed onto the tag stack. Self-closing tags are directly printed.
5. Process Closing Tags: When a closing tag is encountered, it is popped from the tag stack and its corresponding opening tag is checked for proper nesting. The closing tag is printed.
6. Close Remaining Tags: After parsing the entire HTML, any open tags remaining on the stack are closed in reverse order.

PHP Implementation of HTML-Aware Truncation

The following PHP function demonstrates how to truncate HTML text while preserving tags:

function printTruncated($maxLength, $html, $isUtf8 = true) {
    // ... Function logic goes here
}

Example Usage

printTruncated(10, '<b>&lt;Hello&gt;</b> <img src="/static/imghwm/default1.png" data-src="world.png" class="lazy" alt=""> world!'); // Output: "<b><hello></hello></b> <img src="/static/imghwm/default1.png" data-src="world.png" class="lazy" alt=""> world!"

Conclusion

By parsing HTML and handling tags appropriately, we can truncate text while maintaining its structural integrity. This ensures that links, formatting, and other HTML elements are preserved, providing a more accurate and meaningful user experience.

The above is the detailed content of How to Truncate HTML Text Without Distorting Tags?. For more information, please follow other related articles on the PHP Chinese website!