How to remove a specific HTML tag (such as ``) from an HTML string in AnQiCMS template?``")?

In the template development of AnQiCMS, 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>Labels such as these, to maintain the consistency of the page style.It is fortunate that AnQiCMS's flexible template engine (which supports syntax similar to Django templates) provides powerful filtering functions to help us easily solve these problems.

When you are processing HTML strings in the AnQiCMS template, the built-in filters are your helpful assistant.They allow you to format, clean, or convert output content without modifying the original data.removetagsandstriptags.

Remove specific tags from HTML strings:removetagsFilter

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

This filter allows you to specify the name of the tag to be removed. It will intelligently delete these tags and their corresponding end tags without affecting the text content within the tags and other unspecified tags.

How to useremovetagsFilter:

You just need to use the pipe symbol after the variable you need to process|ConnectremovetagsFilter, and list the tags you want to remove in quotes, separated by commas,.

For example, suppose yourarchive.ContentVariable 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>tag, but keep<strong>tag and all text, you can do it like this:

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

Parse the following code:

• archive.Content: This is the content variable containing HTML that you get from the backend.
• |removetags:"i,span": This is the part that applies the filter. It tells the template engine,archive.Contentto remove all<i>Tags and<span>Label.
• |safe: This filter is very important!AnQiCMS template engine, for safety, defaults to escaping all output content to HTML, to prevent XSS attacks.|safe,<is escaped to<,>is escaped to>Your HTML tags will be displayed as plain text, not 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|safeCome explicitly tell 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 are gone, but the text they wrap and<strong>Labels are all retained.

Remove all tags from the HTML string:striptagsFilter

Sometimes, you may not care about what specific HTML tags are 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 tostrip_tags()functions in PHP, which can strip all HTML tags from a string, including HTML comments.

How to usestriptagsFilter:

UsestriptagsFilter byremovetagsEasier, as it does not require specifying the label name.

For example, if you want to get fromarchive.Descriptiona variable the plain text summary:

{# 假设 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 also indispensable here, althoughstriptagsAll tags have been removed, but to ensure that the output is plain text and not doubly escaped characters, it is still best to add it.

Actual application scenarios and **practice

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

• Article list abstract:When displaying the list of articles, you may want to show only the plain text summary of each article to avoid affecting the list layout due to images, special style tags in the article content. At this time,archive.Contentorarchive.DescriptionUsestriptagsand combinetruncatecharsCuts specified number of characters filter, 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, usestriptagsEnsure that the data indexed 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 may accidentally paste in to ensure the content conforms to the design specifications.

Summarize:

• removetags:"tag1,tag2": English 精准移除指定的一个或多个 HTML 标签。
• striptags: English 彻底移除所有 HTML 标签，只保留纯文本。
• |safe: Ensure that the HTML or plain text processed through the filter can be correctly parsed by the browser and not doubly escaped.

Master these two filters, and it 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.

---

Common Questions and Answers (FAQ)

1. Why does my content still display as garbled text or code after removing HTML tags?This is usually because you haven't added it at the end of the filter chain.|safeFilter. AnQiCMS template engine defaults to HTML-escape all output content to prevent security issues. When you useremovetagsorstriptagsProcessed content, if the remaining content (even if it is plain text or the HTML you want to keep) has not been|safeMarked as “safe”, the template engine will escape it again, causing the HTML tag to display as<p>instead of the actual<p>tag. Text-only content may have similar issues. Always remember toremovetagsorstriptagsafter adding|safe.

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

• removetagsHasSelectiveEnglish only removes the HTML tags you explicitly specify, retaining other tags and content. For example, you can only remove<i>and<span>, but retain<strong>and<a>.
• striptagsHasgloballyIt will remove HTML characters from the stringallHTML tags, including comments, leaving only plain text. Choose one based on your specific needs: if you need precise control, retain some tags, useremovetagsIf you only want plain text and do not want to keep any tags, usestriptags.

3. I want to remove tags but also limit the length of the content, can AnQiCMS achieve this?Of course, you can. You can useremovetagsorstriptagsFilters can be used in combination with other text processing filters, such astruncatechars(truncated by character count) ortruncatewords(Truncated by word count).The order of the filters is important: you should remove the tags first, then truncate the text, which ensures that the truncation is on pure text, avoiding truncation of unclosed HTML tags that could lead to page structure errors.{{ archive.Content|striptags|truncatechars:100|safe }}This code will first remove all HTML tags, then extract the first 100 characters as a summary.