Managing website content in AnQi CMS, we often encounter such situations: articles imported from outside, comments submitted by users, or code generated by rich text editors may contain various HTML tags.These tags may be necessary at times, but more often than not, they may disrupt the page layout, introduce unnecessary styles, and even pose potential security risks.removetagsandstriptagsThey can help us easily remove specific or all HTML tags from HTML content, ensuring that the content is displayed in the way we expect.

Understanding HTML tags in the content.

Before we delve into a detailed explanation of these two filters, let's first review why these HTML tags exist in the content. Typically, these tags come from:

  • Rich Text Editor:When we use the visual editor to edit content in the background, operations such as bold, italic, inserting images, and setting titles will generate the corresponding HTML tags in the background.
  • Content Import:Content collected or imported from other platforms or websites often carries the original HTML structure.
  • User Submission:If a website allows users to submit content containing HTML (such as comments, forum posts), various tags may appear.

striptagsFilter: 'Content cleaning', back to pure text

When you need a completely pure text without any HTML tags,striptagsThe filter is your helpful assistant.It will act like a thorough 'spring cleaning', stripping all HTML, XML, and PHP tags from the content, even clearing HTML comments, leaving only the original text.

its usage is very intuitive. Suppose you have a file namedarticleContentThe variable contains the HTML article content, and you want to display a plain text summary on the list page. You can use it like this:

<p>{{ articleContent|striptags }}</p>

In this example,articleContentof all<p>/<img>/<strong>All tags will be removed, and the output will be pure text.

A small hint:When you usestriptagsProcess HTML content and intend to display it as plain text on the page, it is usually paired with|safefilters.|safeTell AnQiCMS template engine that this content has been processed by you, is safe, and can be output as is to avoid the engine from escaping HTML entities again, which may cause the content to be displayed incorrectly on the page<p>Instead of a real paragraph (of course, instriptagsAfter that, the content is already plain text,|safemainly to prevent some special characters from being unexpectedly escaped).

If you have a lot of content to process, or in one block{% filter %}to process content in bulk, you can also use it like thisstriptags:

{% filter striptags %}
    <h1>这是我的文章标题</h1>
    <p>这是一段包含<strong>加粗</strong>和<em>斜体</em>的文字。</p>
    <!-- 这是一个HTML注释 -->
{% endfilter %}

After processing, this content will only remain as plain text: 'This is my article title, this is a bold and italic text.'

striptagsTypical application scenarios include:

  • Generate article summary:Display a plain text summary without HTML on the article list page, search results page, or SEO meta description.
  • Prevent layout destruction:Embed rich text content into some blocks that have strict HTML structure, ensuring it does not contain any tags to avoid style conflicts or layout distortions.
  • Content security:In certain specific scenarios, completely removing HTML tags can effectively avoid certain XSS (Cross-Site Scripting) risks, although there are usually more professional security filtering mechanisms.

removetagsFilter: Fine control, remove specific tags

Sometimes, we may not need to completely remove all HTML tags, but rather hope to selectively remove some specific tags while preserving the structure or basic style of the content. At this point, removetagsThe filter comes into play. It allows you to specify one or more HTML tag names to remove.

removetagsis used in the same way asstriptagsSimilar, but you need to provide a parameter to tell it which tags to remove.

Remove a single tag:Suppose you import an article that contains some<i>The tag indicates italic, but you want to use CSS to control the italic style uniformly, so you want to remove all<i>Tags:

<div>
    {{ articleContent|removetags:"i"|safe }}
</div>

After processing,articleContentof all<i>tags and their contents will be removed, and other tags (such as<p>,<strong>,<img>）will be retained.

Remove multiple tags:If you want to remove multiple<i>and<b>tags at the same time, just separate them with commas in the filter parameters:

<div>
    {{ articleContent|removetags:"i,b"|safe }}
</div>

Withstriptagsas well,removetagsAlso supports in{% filter %}used in blocks:

{% filter removetags:"script,style"|safe %}
    <p>这是一段包含<script>alert('Hello!');</script>和<style>body{color:red;}</style>内容的文本。</p>
{% endfilter %}

This code will remove<script>and<style>tags, but will keep<p>Label.

removetagsTypical application scenarios include:

  • the consistency of content presentation:For example, unify the font size and color of the website, remove old inline style tags (such asfont/styleproperties or<style>tags), and manage CSS files uniformly.
  • Enhance website security:By removingscriptTags to prevent potential XSS attacks, especially when the content source is not trusted.
  • Optimize SEO:Ensure that only the key semantic tags are retained, and remove unnecessary tags that may interfere with search engine parsing.
  • Clean up redundant or obsolete tags:Remove tags that are no longer recommended in the HTML5 standard to maintain modernity of the code.

Why are these filters so important in AnQiCMS?

As a content management system that focuses on efficiency, customization, and scalability, AnQiCMS understands the importance of content quality and display effect.removetagsandstriptagsThese filters are the efficient tools provided by AnQiCMS at the template level for content operators and website developers, helping us:

  1. Improve content quality:Ensure the neatness of the output content, avoiding the negative reading experience caused by chaotic HTML tags.
  2. Enhance the aesthetic appeal of the website:Maintain consistency in content display across multiple sites, avoid style conflicts between different sources.
  3. Optimize SEO performance:Control the purity of metadata and summaries to improve the accuracy of search engine crawling.
  4. Ensure website security:Targetedly remove malicious or inappropriate HTML tags to reduce security risks.

Mastering these two filters means you have more refined control over the HTML content in AnQiCMS, and can tailor it to different display needs