In Anqi CMS, when managing website content, we often encounter situations where articles imported from outside, comments submitted by users, or code generated by rich text editors may contain various HTML tags.These tags are sometimes necessary, but more often, they may disrupt the page layout, introduce unnecessary styles, and even pose potential security risks. 幸运的是，AnQiCMS provides two very practical template filters -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 the detailed introduction of these two filters, let's first review why these HTML tags exist in the content. Usually, 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, setting titles, and so on will generate the corresponding HTML tags in the background.
  • Content Import:Content imported from other platforms or websites often brings the original HTML structure.
  • User Submission:If the website allows users to submit content containing HTML (such as comments, forum posts), various tags may appear.

These HTML tags are indispensable in some situations, such as on article detail pages where paragraphs, images, and other structures need to be preserved.But if we use this content with complete HTML structure for page summaries, search result descriptions (meta description), or in a strictly styled block, problems may arise: it may cause layout chaos, even introduce security vulnerabilities, or affect SEO performance.

striptagsFilter: 'Great cleaning' of content, returning pure text.

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

Its usage is very intuitive. Suppose you have a namedarticleContentThe variable contains HTML content of an article, 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,articleContentAll of<p>/<img>/<strong>All tags will be removed, and the output will be pure text.

A little tip:When you usestriptagsWhen processing HTML content and planning to display it as plain text on the page, it is usually paired with|safefilter usage.|safeTell AnQiCMS template engine that this content has been processed by you, it is safe, it can be output as is, and avoid the engine from escaping HTML entities again, which may cause the content to be displayed on the page<p>It is not a real paragraph (of course, instriptagsAfter that, the content is already plain text,|safemainly to prevent special characters from being accidentally escaped).

If you need to process a lot of content, or in a block{% filter %}you can also use this method to process it in bulkstriptags:

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

After processing, this content will only remain as plain text such as 'This is my article title This is a paragraph with 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 requirements, ensuring that it does not contain any tags to avoid style conflicts or layout errors.
  • Content security:Under certain specific scenarios, completely removing HTML tags can effectively avoid certain XSS (cross-site scripting attack) risks, although there are usually more professional security filtering mechanisms.

removetagsFilter: Fine control, remove specific tags

Sometimes, we do not need to completely remove all HTML tags, but instead, we want to selectively remove certain specific tags while retaining other tags to maintain the structure or basic style of the content. At this time,removetagsThe filter comes into play. It allows you to specify one or more HTML tag names to be removed.

removetagsUsage withstriptagsSimilar, 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 italic, so you want to remove all of them<i>Tags:

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

After processing,articleContentAll of<i>The tag and its content will be removed, while other tags (such as<p>,<strong>,<img>) will be retained.

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

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

withstriptagsLikewise,removetagsit also supports in blocks:{% filter %}Block usage:

{% 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 retain<p>.

removetagsTypical application scenarios include:

  • to maintain uniformity of content:For example, unify the font size and color of the website, remove old inline style tags such asfont/styleproperty or<style>Label, to manage CSS files统一。“
  • Enhance website security:By removingscriptLabel to prevent potential XSS attacks, especially when the content source is not trusted。“
  • Optimize SEO:Ensure only critical semantic tags are retained, remove unnecessary tags that may interfere with search engine parsing.
  • Clean up redundant or deprecated tags:Remove tags that are no longer recommended in the HTML5 standard to maintain the modernity of the code.

Why are these filters so important in AnQiCMS?

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

  1. Improve content quality:Ensure the neatness of the output content, avoiding reading experience affected by chaotic HTML tags.
  2. Enhance the aesthetics of the website:Maintain consistency in the display of content across multiple sites, avoiding style conflicts between different sources.
  3. Optimize SEO performance:Control the purity of metadata and abstracts, improving the accuracy of search engine crawling.
  4. Ensure website security:Remove malicious or inappropriate HTML tags targetedly, reducing security risks.

Mastering these two filters means you have greater control over the HTML content in AnQiCMS, allowing you to meet different display needs