When using AnQiCMS for website content management and template development, we often encounter scenarios where we need to clean up or adjust the HTML structure of the content. Among them,removetagsThe filter is a very practical tool, but how it works, especially whether it will remove the content inside the tags when removing tags, is a concern for many users.

This article will deeply explore the AnQiCMS template engine inremovetagsthe behavior of filters, and help everyone clearly understand its function through examples.

removetagsFilter: accurately remove specified tags

Firstly, it is clear that the AnQiCMS template engine'sremovetagsfilter removes tags andwon'tSimultaneously remove the content inside the tag. Its design purpose is to provide a 'scalpel-like' precise control, only for the specified HTML tag itself to be removed, while the text or other HTML elements wrapped in the tag will be retained.

which means that if you have a segment of HTML text, for example<strong><i>你好，AnQiCMS！</i></strong>and decided to useremovetagsfilter out the<i>tags, then the final result will be<strong>你好，AnQiCMS！</strong>. Look, <i>The tag has been removed, but the text "Hello, AnQiCMS!" it contains is still perfectly intact and remains within<strong>the tag's enclosure.

The advantage of this way of working is that it allows you to flexibly adjust the presentation of the content or remove unnecessary style tags without losing any actual text information. For example, when content is imported from other platforms, it may contain styles that do not match your website's style.fontTags or irregularspantags in the template,removetagsIt can be put to use, quickly cleaning up these 'junk' tags without affecting the core content.

How to useremovetagsFilter

removetagsThe usage of the filter is very intuitive, its basic syntax is:

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

Among them:

  • 变量This is the HTML string you want to process.
  • 标签名1,标签名2,...This is the name of one or more HTML tags you want to remove, separated by English commas.,Separator. Please note that only the tag name needs to be written, not the angle brackets.
  • | safe: This is crucial. Due toremovetagsThe filter processes HTML content and it is expected that the final output should still be parsed as HTML, therefore it is essential to add at the end of the filter chain| safeFilter. Otherwise, the processed HTML code may be automatically escaped by the template engine and displayed as plain text on the page instead of being rendered by the browser.

Example: Remove specific tags

Assume you have a piece of content from an article detailarticleContentincluding<b>(Bold) and<u>(Underline) tags, and you want to remove them to unify the style:

{# 假设 articleContent 的值为 "这是一段<b>重要的<u>文本</u></b>内容。" #}
{{ articleContent | removetags:"b,u" | safe }}

This code will output:这是一段重要的文本内容。

removetagswithstriptagsDifference

In the AnQiCMS template filter, there is also another feature similar but different in behaviorstriptagsfilter. Understanding the differences between them helps you choose the most suitable tool:

  • striptagsFilter: As the name implies, "strip" means to strip.striptagsIt aims to strip the characters in the string of.allHTML tag, not distinguishing between types. Its goal is to obtain plain text content, removing any HTML structure.
    • For example:{{ "这是一段<b>重要的<u>文本</u></b>内容。" | striptags | safe }}It will output.这是一段重要的文本内容。
  • removetagsFilterProvide finer control, you can explicitly specify which to removespecifictags, while retaining other tags.

In short, when you need to extract plain text from HTML content, usestriptagsWhen you need to selectively remove certain tags while retaining most of the HTML structure and text,removetagsis the better choice.

Usage suggestions

  1. Always use|safe:As mentioned earlier, whenremovetagsThe output of the filter is expected to be HTML, be sure to add it afterwards|safeFilter to prevent content from being automatically escaped
  2. Remove tags cautiously:ThoughremovetagsIt is very useful, but still need to consider the possible impact when removing tags. For example, removing<h1>/<h2>Title tags may affect the semantic structure of the content, thereby affecting search engine optimization (SEO). For<a>Link tag, removing it will only keep the link text but will lose the hyperlink function.
  3. Specify accurately:Only the tags you list will be removed. If the tag has attributes, for example<div class="some-class">,removetags:"div"Will also remove the entiredivelement (including its attributes), retaining only its content.

ByremovetagsFilter, AnQiCMS provides a powerful and flexible tool for content operators and template developers, helping us manage and present website content more effectively, ensuring that users have a** pleasant reading experience.

Frequently Asked Questions (FAQ)

1.removetagsCan be removed<script>Do you have a tag? After removing it, will the JavaScript code be retained?Yes,removetagsCan be removed<script>Tag. After removing,<script>The JavaScript code within the tags is preserved, but due to<script>The tag itself is removed, the browser will not execute this JavaScript code. If you need to completely remove the script content and its functionality,removetagsis valid.

2.removetagsDoes it support removing tags with specific attributes? For example, only removeclass="danger"ofdivTag? removetagsThe filter is based on tag name matching and removal, it does not provide based on tag attributes such asclass/id/styleThe feature to conditionally remove. When you specify removaldivtags, alldivLabels will be removed, regardless of whether they have specific attributes.If a more complex condition filter is needed, it may be necessary to process the content before it is stored, or to dynamically handle it on the front end using JavaScript.

3. After removing the tags, if there are any whitespace characters (such as newlines, spaces) between the original two tags, how will these whitespace characters be handled? removetagsThe filter, after removing tags, will retain all characters between tags, including whitespace characters, newline characters, etc. For example,<div> 内容A </div><div> 内容B </div>After removingdivthe tag, it may become内容A 内容B(The number of blank characters depends on the original text). If you want to further clean up these extra blank characters, you can consider using such asremovetagsafter that, combined with such astrimFilter or custom string replacement logic.