In the template development of AnQi CMS, we often encounter the need to handle content output by rich text editors. This content usually contains various HTML tags, such as those used for emphasizing.<strong>English for italic usage<i>English, or other like<em>/<span>/<div>etc.Although these tags are assigned rich styles during editing, in certain specific display scenarios, we may need to remove some of them to ensure the consistency of the page style or achieve a specific display effect.

The template system of Anqi CMS is very similar to the Django template engine, providing powerful filter functions to handle such needs. When content contains HTML tags and needs to be displayed correctly on the front-end page, we usually use|safeFilter that tells the template engine that this content is safe and does not need to be HTML-escaped, so that the browser can render it as normal HTML code.But if our goal is to remove certain specific HTML tags, we need to introduce another powerful tool.

UnderstandingremovetagsFilter: A Precision Removal Tool

AnQi CMS providesremovetagsA filter that can accurately remove all the HTML tags specified in the content.This is particularly useful for maintaining the neatness and consistency of the page layout, or when certain tags (such as inappropriate tags entered by users) may disrupt the page structure.

removetagsThe basic usage of a filter is:

{{ 内容变量 | removetags:"标签名1,标签名2,..." | safe }}

For example, suppose we have a piece of article content stored inarchive.Contenta variable, and this content may contain<i>and<strong>Labels, but we hope to remove them when displaying, while keeping other like<p>or<a>labels. We can use them like thisremovetagsFilter:

<div>
    {{ archive.Content | removetags:"i,strong" | safe }}
</div>

This code will iteratearchive.Contentall HTML tags, and all<i>and<strong>Label itself is removed, but the text content inside these labels will be retained. Then,|safeThe filter ensures that the processed content can be normally rendered as HTML code by the browser. Please note that if multiple tags need to be removed, only the tag name should be separated by English commas.,Seperate them.

You can remove any standard HTML tags, for example:

  • Remove italics and emphasis:removetags:"i,em,strong"
  • Remove generic containers:removetags:"span,div"
  • Remove images and links (if you do not want them to appear in the content):removetags:"img,a"

This way, you can very flexibly control which HTML tags should be displayed and which should be cleaned.

striptagsFilter: Another option for full disk cleaning

Exceptremovetags, and the Anqi CMS also providesstriptagsa filter. It works withremovetagsdifferences lie in,striptagswill remove the content ofallHTML tags (including XML and PHP tags), and only retain plain text content.

striptagsThe basic usage of a filter is:

{{ 内容变量 | striptags | safe }}

For example,archive.DescriptionField may contain HTML, but we only want to display the plain text summary, then we can use: 

<p>
    {{ archive.Description | striptags | safe }}
</p>

striptagsApplicable to scenarios that require complete removal of all formatting and only obtain the original text. However, if your purpose is to selectively retain certain HTML tags and remove others onlyremovetagsThis would be a more precise and suitable choice.

Some considerations in practical application

There are some important details to pay attention to when using these filters in the template:

  • The order of the filter chain is crucial:Ensure thatremovetagsorstriptagsFilter is|safehas been applied previously. If|safeThe filter is executed first, and the HTML tags in the content will be recognized as real HTML elements by the browser first, thenremovetagsIt cannot be operated on anymore. The correct order is to handle the HTML structure first, and then mark it as safe output.

  • Case of tag name:Although HTML tags are usually case-insensitive, it is recommended to use lowercase tag names consistently in filters to ensure** compatibility and avoid potential issues.removetagsFilter names are used in lowercase to ensure consistency and avoid potential issues.

  • Security and content source:Removing tags can help you control the page style, but it cannot completely replace the safety review of user input content.If your content comes from unreliable external sources, even if specific tags are removed, you should still be vigilant about potential cross-site scripting (XSS) attack risks.In some cases, it may be necessary to combine other security measures or to apply stricter filtering to the content source.

By using flexibilityremovetagsandstriptagsThese two filters allow you to better control the display style of content in the CMS template, making your website have a more unified and professional visual presentation while maintaining content richness.

Common Questions (FAQ)

  1. Q: Remove<i>or<strong>After the tag is removed, will the style of the content text (such as italic, bold) still be retained?A: No.removetagsThe filter will remove the tag itself, which means that the styles associated with these tags (such as<i>Brings italic,<strong>Brings bold) will no longer be displayed. However, the text content within the tags will be preserved in full.

  2. Q: If I want to remove HTML tags but don't want to use|safefilters, can I?A: Yes. If you don't use|safeFilter, the template engine will default to escape the content as HTML entities.This means that all HTML tags (including the ones you want to preserve) will be displayed as plain text, rather than as renderable HTML elements.|safeCan it render the allowed HTML tags correctly?

  3. Q:removetagsCan you remove HTML tags with attributes? For example,<a href="link.html">?A: Yes,removetagsThe filter removes elements based on the tag name, regardless of whether the tag contains attributes. As long as the tag name matches, the entire tag (including all its attributes) and its internal text content will be processed. If you specify removalaLabel, then<a href="link.html">文本</a>There will only be文本.