How to safely remove all or part of a specified tag from HTML content in AnQiCMS templates?

When building a website with AnQiCMS, we often need to finely control the content displayed on the page.In particular, when dealing with user submitted content, importing articles from different sources, or simply to maintain consistency in the page style, you may encounter the hassle of HTML tags.These tags may contain unnecessary formatting, style, and even potential security risks. 幸运的是，AnQiCMS template system provides a flexible mechanism to help us safely and efficiently remove all or part of the specified tags from the HTML content.

Why do we need to remove HTML tags?

There are many different needs to remove HTML tags in content management:

• Unified content display:For example, we may want to display plain text summaries in the article list instead of complex styled HTML paragraphs, or we may want to standardize the title style, removing any possible HTML content included in the article.<h1>to<h6>Wait for the title tag.
• Improve user experience:Removing unnecessary tags can make the page load faster and reduce layout issues caused by external style conflicts.
• Enhance content security:Although AnQiCMS defaults to HTML-escaping content to prevent common cross-site scripting (XSS) attacks, manually removing some potentially dangerous tags can still provide additional security in certain scenarios where raw content needs to be output directly.
• Adapt to different scenarios:The same content may need to be presented in different forms in different template parts, for example, on the article detail page, you need complete rich text content, while in the sidebar recommendation module, you only need plain text title and summary.

The AnQiCMS template system, with syntax similar to the Django template engine, provides several powerful filters (Filters) to achieve this goal, the most commonly used beingremovetagsandstriptags.

Precision strike: Remove specified tag (removetags)

When we need to selectively remove specific tags from HTML content while retaining other tags and text,removetagsThe filter can be used. This filter allows us to list the names of the tags that need to be removed, separated by commas.

For example, let's assume we have a piece of content<strong><i>你好！</i>这是一个<p>段落</p></strong>We may wish to remove the italic from it<i>tags, but retain the bold<strong>and paragraphs<p>.

We can use it like thisremovetagsFilter:

{{ "<strong><i>你好！</i>这是一个<p>段落</p></strong>"|removetags:"i"|safe }}

Here|removetags:"i"instruct the template engine to remove all<i>tags and their content. The final output will be:

<strong>你好！这是一个<p>段落</p></strong>

If we need to remove multiple tags, just list them separated by commas:

{{ "<strong><i>你好！</i>这是一个<p>段落</p></strong>"|removetags:"i,p"|safe }}

This will remove:<i>and<p>Tags, output:

<strong>你好！这是一个段落</strong>

It should be noted that,removetagsRemove the entire tag and its content. If you only want to remove the tag while keeping the text inside, a more complex processing is required, but this goes beyondremovetagsthe direct function of the filter.

Completely clean: remove all labels (striptags)

Sometimes, our goal is to obtain completely pure text content, without any HTML tags. At this point,striptagsThe filter is the ideal choice. It will remove all HTML tags, including their attributes, leaving only plain text.

Continue using the above example, if we want to get<strong><i>你好！</i>这是一个<p>段落</p></strong>the plain text content:

{{ "<strong><i>你好！</i>这是一个<p>段落</p></strong>"|striptags|safe }}

by applyingstriptagsa filter, all tags will be removed, the output will be:

你好！这是一个段落

striptagsIt is a very convenient tool, especially suitable for displaying article summaries, descriptions, or any place that only needs plain text.

about|safeImportant notes on the filter

While usingremovetagsorstriptagsWhen filtering, you may notice that a sample code often follows|safeFilter. This is because the AnQiCMS template system defaults to escaping all output content to prevent XSS attacks.This means, if there is not|safe, even if you remove some tags, the remaining HTML structure (such as<strong>) will be escaped into<strong>Display on the page, rather than being parsed by the browser as bold text.

For example:

{# 移除 i 标签，但不使用 |safe #}
{{ "<strong><i>你好！</i>这是一个<p>段落</p></strong>"|removetags:"i" }}

The output will be:

<strong>你好！这是一个<p>段落</p></strong>

To let passremovetagsorstriptagsThe processed HTML content (ifremovetagsleft HTML）can be parsed normally by the browser, we need to explicitly tell the template engine that this content is 'safe' and does not need to be escaped, which is where we use|safefilter.

Therefore, when you want the remaining HTML structure to render normally after removing a specific tag, you must add it at the end of the filter chain|safe.

Application scenarios in practice

These filters are widely used in the AnQiCMS template, especially when displaying document content (archive.Content）Document Description（archive.Description) or custom fields.

Assuming we need to display article summaries on a list page, we do not want any HTML tags to appear in the summaries:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description|striptags}}</p> {# 摘要只显示纯文本 #}
        </div>
    {% endfor %}
{% endarchiveList %}

If our article content uses a Markdown editor and renders it as HTML (for examplearchive.Content|render:trueThen the tag removal filter can also be applied to the rendered HTML content for further refinement control.

Summary

AnQiCMS template inremovetagsandstriptagsThe filter provides us with powerful content control capabilities. Whether it is necessary to completely remove all HTML tags to obtain plain text or to selectively remove specific tags to standardize content display, these filters are very practical tools. Combined|safeFilter, we can ensure that the content is both safe and rendered as expected.When using these tools, it is recommended to always perform thorough testing to ensure that the content display conforms to the design and functional requirements of the website.

Frequently Asked Questions (FAQ)

1.removetagsandstriptagsWhat are the differences between filters?

striptagsThe filter will remove all HTML tags from the HTML content, leaving only plain text. For example,"<b>Hello</b> World"|striptagsIt will output."Hello World"HoweverremovetagsThe filter allows you to specify one or more HTML tag names to remove only these specific tags while keeping the other tags and their content. For example,"<b>Hello</b> <i>World</i>"|removetags:"i"It will output."<b>Hello</b> World".

2. Why do I still need to add after usingremovetagsorstriptags?|safeFilter?

The AnQiCMS template system, to prevent cross-site scripting (XSS) attacks, defaults to escaping all output variable content. This means that HTML tags will be converted to<and>Entities such as, not parsed by the browser. When you useremovetagsorstriptagsif you want the remaining HTML content (such asremovetagsthat might be retained after<strong>Tags can be parsed by the browser normally, rather than displayed as raw HTML code, you need to use|safeThe filter explicitly tells the template engine that this content is safe and does not need to be escaped. If your goal is plain text, then instriptagsthen add|safeThe filter is a good habit, although it may not change the final visual effect for plain text output, it makes the process clearer.

**3.removetagsWhether the filter