How to use the `removetags` filter to remove specified HTML tags from HTML content?

In website operation, we often encounter the need to handle various types of content from different sources, which may contain complex HTML structures or specific tags that we do not want to display on the front end.In order to maintain the consistency and aesthetics of the website content and ensure the loading efficiency of the page, it is particularly important to control these HTML tags accurately.removetagsIt is a very practical tool, which can help us accurately remove specified tags from HTML content, making the content cleaner and more in line with expectations.

removetagsFilter: Fine-tune HTML content

In simple terms,removetagsThe filter allows you to select and remove one or more specified HTML tags from a block of HTML text while retaining other tags and the text within them.

Its application scenarios are very extensive. For example, you may collect an article from an external platform, which contains a large number of<span>tags, inline styles, and even some incompatible ones<font>Tags, these may interfere with the overall layout and style of your website. Useremovetags, you can easily batch delete these unnecessary tags, leaving only the core structured content.

withstriptagsThe filter (which removes all HTML tags, leaving only plain text content) is different,removetagsProvided finer control.You do not need to strip all HTML completely, just remove those 'question tags' to achieve content purification while maintaining a certain format.

How to use in AnQiCMS templateremovetags

Use in AnQiCMS template,removetagsThe filter is very intuitive. Its basic syntax is:

{{ 您的HTML内容变量 | removetags:"要移除的标签1,要移除的标签2" | safe }}

Let's break down this syntax:

• 您的HTML内容变量This usually contains HTML content, such as article details retrieved from a databasearchive.Contentor page descriptionpage.Descriptionetc.
• | removetags:"..."This is the filter itself. In the quotes after the colon, you need to list all the HTML tag names you want to remove, separated by English commas,Separate. The tag name is usually lowercase, for examplep/div/span/imgetc.
• | safe: It should be noted that, due toremovetagsThe filter processes HTML content, in order to ensure that the processed HTML can be correctly parsed and displayed by the browser, you need toremovetagsuse immediately after the filter|safeFilter. Otherwise, the browser may display HTML tags as plain text instead of rendering them in the expected format.

Next, we will further understand its usage through several specific examples.

Example one: Remove a single HTML tag

Suppose you have a piece of content that includes<i>Label, but you want to remove it:

{# 假设 article.Description 变量中包含：
   <p>Hello <strong>AnQiCMS</strong><i> World</i>!</p>
#}

<div>
    {{ article.Description | removetags:"i" | safe }}
</div>
{# 实际输出：
   <div><p>Hello <strong>AnQiCMS</strong> World!</p></div>
#}

In this example,<i>The label has been successfully removed, but the text content "World" inside it has been preserved and wrapped in:<p>and<strong>The label has also been preserved.

Example two: Remove multiple HTML tags

If you need to remove multiple types of tags at the same time, just separate them with commas in the parameters:

{# 假设 article.Content 变量中包含：
   <p><font color="red">重要通知</font>：请注意<i>更新</i>，详情请访问<span>我们的官网</span>。</p>
#}

<div>
    {{ article.Content | removetags:"font,i,span" | safe }}
</div>
{# 实际输出：
   <div><p>重要通知：请注意更新，详情请访问我们的官网。</p></div>
#}

By specifyingfont,i,spanAll of this content,<font>/<i>and<span>The tags have been removed, only the plain text content and the external<p>.

Example three: Cleaning the content imported from the external

When dealing with content collected or imported from other platforms, you often encounter specific tags that you do not want to appear on your website, such as<script>(for security reasons), inline style tagsstyleOr some rarely usedembed.

{# 假设 imported_content 变量中包含：
   <div style="color: blue;">
       <p>欢迎来到<span>我的网站</span>。</p>
       <script>alert('xss');</script>
       <embed src="test.swf" type="application/x-shockwave-flash">
   </div>
#}

<div>
    {{ imported_content | removetags:"div,span,script,embed,style" | safe }}
</div>
{# 实际输出：
   <div><p>欢迎来到我的网站。</p></div>
   注意：由于“style”通常是属性而非独立标签，移除“style”属性可能需要其他过滤器或在内容编辑时处理。此处“style”作为标签被忽略。
   这个例子主要展示移除标签，而非属性。
#}

This example shows how toremovetagsRemove some tags that may pose security risks or destroy the layout, making the content safer and cleaner.

Summarize and note the precautions

ByremovetagsFilter, AnQiCMS allows content operators to control the presentation of website content more flexibly and accurately.In order to maintain the consistency of the page style or to clean up redundant code introduced from external sources, this tool can help you a hand, keeping your website content in a **state.**

While usingremovetagsAt that time, please be cautious in choosing the tags to remove. Removing too many or incorrect tags may lead to an unsatisfactory display effect of the content, or even the loss of important information.If you are unsure of the function of a certain tag, it is best to try it out in a test environment first.At the same time, if your goal is to strip all HTML tags and only keep plain text, thenstriptagsA filter might be a more direct choice.

Remember,|safeIt is an indispensable companion. It tells the AnQiCMS template engine that this content is explicitly allowed to be directly output as HTML.

Frequently Asked Questions (FAQ)

1.removetagsandstriptagsWhat are the main differences of the filter?

striptagsThe filter will remove all HTML tags from the content, leaving only plain text.removetagsThe filter provides finer control, it only removes the HTML tags you explicitly specify, while retaining other unspecified tags and their internal text content. In simple terms,striptagsAre “All Remove”removetagsAre “Specific Remove”

2. Will the text content inside the tag be retained after removing the tag?

Yes,removetagsThe filter will only remove the HTML tags themselves (including their start and end tags), but the text content wrapped in these tags will be preserved in full. For example, if you remove<i>Tags, then<i>斜体文字</i>will become斜体文字.

3.removetagsCan remove self-closing tags (such as<br/>/<img>or<hr/>) right?

Can.removetagsThe filter can also identify and remove self-closing tags