How to remove specific HTML tags from HTML strings in the AnQiCMS template (such as `` and ``)?

In AnQiCMS template development, we often encounter content coming from rich text editors or imported from outside, which may contain some HTML tags we do not want to display at specific locations. For example, in the summary part of the article list, we may only want to display plain text or need to remove specific<i>/<span>The labels, to maintain the uniformity of the page style. Fortunately, AnQiCMS's flexible template engine (which supports syntax similar to Django templates) provides powerful filter functions that can help us easily solve these problems.

When you are processing HTML strings in the AnQiCMS template, the built-in filters are your helpful tools.They allow you to format, clean, or convert output content without modifying the original data.For the need of removing HTML tags, two very practical filters are mainly used:removetagsandstriptags.

Remove a specific tag from an HTML string:removetagsFilter

If you need to accurately remove one or more specific HTML tags from an HTML string while retaining other tags and text content, thenremovetagsThe filter is your ideal choice.

This filter allows you to specify the tag names you want to remove, it will intelligently delete these tags and their corresponding closing tags without affecting the text content within the tags and other unspecified tags.

How to useremovetagsFilter:

You only need to use the pipe symbol after the variable to be processed|连接removetagsFilter and list the tags you want to remove in quotes, separated by commas,Separated.

For example, let's assume yourarchive.ContentThe variable contains the following HTML content:

<p>这是一段包含 <i>斜体</i> 和 <span style="color:red;">红色文本</span> 的文章内容。</p>
<p>我们还有 <strong>粗体文字</strong>。</p>

If you want to remove the<i>and<span>Labels, but retain<strong>tags and all text, you can do it like this:

{# 假设 archive 是一个文档对象，其 Content 字段包含了 HTML 内容 #}
{{ archive.Content|removetags:"i,span"|safe }}

Parse this code:

• archive.Content: This is the content variable you get from the background, containing HTML.
• |removetags:"i,span": This is the part where the filter is applied. It tells the template engine toarchive.Contentremove all<i>Tags and<span>.
• |safe: This filter is very important! The AnQiCMS template engine, for security reasons, defaults to escaping all output content to prevent XSS attacks.This means, if there is not|safe,<will be escaped to<,>will be escaped to>Your HTML tags will be displayed as plain text instead of being parsed by the browser. Since we have removed the unnecessary tags, we now hope that the remaining HTML can be rendered normally, so we need to add|safeMake it clear to the template engine that this content is safe and does not need to be escaped.

After processing, the above HTML content will be output as:

<p>这是一段包含 斜体 和 红色文本 的文章内容。</p>
<p>我们还有 <strong>粗体文字</strong>。</p>

As you can see,<i>and<span>The tags have disappeared, but the text they contain and<strong>The tags are retained.

Remove all tags from the HTML string:striptagsFilter

Sometimes, you may not care about the specific HTML tags in the content, but just want to completely remove all HTML tags and keep only plain text. In this case,striptagsThe filter will be very convenient. It is similar to the function in PHP.strip_tags()It can strip all HTML tags from the string, including HTML comments.

How to usestriptagsFilter:

Usestriptagsfilterer thanremovetagsIt is simpler because it does not require specifying the tag name.

For example, if you want to extractarchive.Descriptiona plain text summary from the variable:

{# 假设 archive.Description 包含一段带有 HTML 的简介 #}
{{ archive.Description|striptags|safe }}

Ifarchive.DescriptionThe content is:

<p>文章的<strong>精彩</strong>简介，其中包含<i>重要信息</i>。</p>

afterstriptagsAfter filtering, the output will be:

文章的精彩简介，其中包含重要信息。

Similarly,|safeThe filter is indispensable here, thoughstriptagsAll tags have been removed, but to ensure that the output is plain text and not characters that have been doubly escaped, it is best to add it.

Application scenarios and **practice

In the AnQiCMS template, you can apply these filters in various scenarios:

• Summary of article list:When displaying a list of articles, you may want to display only plain text summaries for each article to avoid affecting the layout of the list due to images or special style tags. At this time,archive.Contentorarchive.DescriptionUsestriptagsand combinetruncatechars(Character count) cutter, can create a neat and unified abstract.
• Title or meta description:If the article title or meta description (Keywords, Description) field accidentally contains HTML tags, usestriptagsMake sure the data fetched by the search engine is plain text.
• Custom content block: In some custom content blocks, you may need to remove specific style tags that users accidentally paste in to ensure the content conforms to design specifications.

Summarize:

• removetags:"tag1,tag2": Remove the specified one or more HTML tags accurately.
• striptags: Remove all HTML tags completely, retaining only plain text.
• |safeMake sure that the HTML or plain text processed by the filter can be correctly parsed by the browser and not re-escaped.

Mastering these two filters will greatly enhance your flexibility and control over content display and page layout in AnQiCMS, helping your website present a more professional and consistent user experience.

Frequently Asked Questions (FAQ)

1. Why is my content still displayed as garbled or code after removing the HTML tags?This is usually because you did not add it at the end of the filter chain.|safeFilter. The AnQiCMS template engine defaults to escaping all output content to prevent security issues. When you useremovetagsorstriptagsAfter processing the content, if the remaining content (even if it is plain text or HTML you wish to preserve) has not been|safeMarked as “safe”, the template engine will escape it again, causing HTML tags to be displayed as<p>instead of the actual<p>tag, plain text can also have similar issues. Remember toremovetagsorstriptagsthen add|safe.

2.removetagsandstriptagsWhat is the essential difference, how should I choose?The main difference lies in the range of removal:

• removetagsHavingSelectiveOnly remove the HTML tags you specify, keeping other tags and content. For example, you can only remove<i>and<span>but keep<strong>and<a>.
• striptagsHavinggloballyIt will remove HTML characters from the stringallHTML tags, including comments, leaving only plain text. Choose which one depends on your specific needs: if you need fine control, keep some tags, useremovetagsIf you only want plain text without any tags, usestriptags.

Can AnQiCMS remove tags while limiting the length of content? 3.Of course you can. You can useremovetagsorstriptagsFilters with other text processing filters, such astruncatechars(truncated by character count) ortruncatewords(Truncate by word count). The order of the filters is important: you should remove tags first, then truncate the text, ensuring that you are truncating pure text to avoid truncating unclosed HTML tags and causing page structure errors. For example: {{ archive.Content|striptags|truncatechars:100|safe }}This code will first remove all HTML tags, then extract the first 100 characters as a summary.