How to accurately remove all HTML tags from AnQiCMS template HTML content, leaving only plain text information?

In AnQiCMS template design, we often encounter situations where we need to display content but do not want to show the included HTML tags.For example, we may need to extract the plain text summary of an article, or display unformatted category descriptions on a list page.Directly outputting content that includes HTML may disrupt the page layout and even pose security risks.AnQiCMS's powerful template engine provides a simple and efficient solution, helping us accurately remove HTML tags and retain only plain text information.

Know the "behind-the-scenes hero" of text processing

AnQiCMS's template system borrowed the grammar features of Django template engine, which includes a rich set of filters (Filters) for various variable processing, including text formatting and cleansing. When it comes to removing HTML tags, two very practical filters are mainly used:striptagsandremovetags.

1.striptagsFilter: One-click purification of all HTML tags

When our goal is to completely remove all HTML, XML, and even PHP tags from the content, leaving only pure text information, striptagsThe filter is our first choice. It is like a professional cleaner, able to remove all the tag structures from the content, leaving no trace.

The usage method is very intuitive:Assuming we have a variablearchive.ContentIt includes the complete HTML content of the article. If you want to display only the plain text part of this content in the template, you can use it like this:

{{ archive.Content|striptags }}

Through this simple operation,archive.Contentall of the<p>,<div>,<strong>,<img>All HTML tags will be removed, leaving only the text inside them.

Why should it cooperate?|safeWhy use the filter?In the AnQiCMS template, to prevent cross-site scripting (XSS) and other security issues, the template engine defaults to escaping all output content to HTML entities. This means that if your original content contains something like<or>Special characters (even if they are not part of the tag but are text content) may also be escaped into<or>.

striptagsAlthough the filter removes the tags, if the original text already contains HTML entities (such as&Indicates&symbols),striptagsit will not convert them back to the original characters. More importantly, ifstriptagsThe text contains after processed<or>Characters such as default escaping mechanisms will re-escape them. To ensure that the final output is the pure text we expect and to avoid unnecessary double escaping, we usually escape them instriptagsAdd one later|safefilter.|safeThe filter tells the template engine that this part of the content is safe and does not require additional HTML entity encoding processing.

Therefore, the recommended usage is:

{{ archive.Content|striptags|safe }}

This removes the HTML tags and ensures that the final output text content is not re-escaped by the template engine.

2.removetagsFilter: accurately remove specified tags

Sometimes, we may not need to remove all HTML tags, but rather want to retain certain specific tags while removing all other tags. In this case,removetagsThe filter can be put to good use. It allows us to specify one or more HTML tags to be removed.

Usage:InremovetagsAfter the filter, list the names of the tags to be removed in the form of comma-separated values. For example, if you want to remove<b>and<i>tags, you can write it like this:

{{ archive.Description|removetags:"b,i"|safe }}

This operation will removearchive.Descriptionall of the<b>and<i>tags, but if the content contains<p>or<span>Other tags will be retained. Similarly, to avoid unnecessary escaping, it is recommended thatremovetagsafter that|safefilter.

Example of practical application scenarios

These filters are widely used in the daily content operation of AnQiCMS.

Display a concise summary on the list page:When we need to display the summary of each article on the article list page without any formatting:

<div class="article-summary">
    <p>{{ item.Description|striptags|safe }}</p>
</div>

Extract plain text introduction on the category page:If category profilecategory.ContentMay contain rich text and images, but we only want to display the plain text part at a specific location:

<h2 class="category-title">{{ category.Title }}</h2>
<div class="category-plain-text-intro">
    <p>{{ category.Content|striptags|safe }}</p>
</div>

No matter whether it is article content, category description, single page content, or any other custom field that may contain HTML, as long as you want to extract its plain text information, these two filters can provide strong support.

By flexible applicationstriptagsandremovetagsFilter, we can easily control the display form of page content, ensuring clarity and tidiness of information, while maintaining the overall beauty and functionality of the website.

Frequently Asked Questions (FAQ)

Q1:striptagsandremovetagsWhat are the main differences between these two filters? A1: striptagsThe filter removes all detected HTML, XML, and PHP tags from the text content, the purpose is to obtain pure text information without retaining any formatting. AndremovetagsThe filter provides finer control, it only removes the HTML tags you explicitly specify, and other unspecified tags will be retained. If your goal is to thoroughly clean the content and remove all formatting, please usestriptags; If you want to retain part of the tags, for example, only remove the script tags while retaining the paragraph tags, you should useremovetags.

Q2: I used|striptagsfilter, but why can the text like&or<What does this character represent? A2: striptagsThe filter is responsible for removing HTML tag structures (such as<p>/<div>), it does not handle HTML entities (such as&/<). If the original content you have already contains these HTML entities,striptagsHuaiyuan