When using AnQiCMS for content creation and display, we often need to flexibly control the way content is presented on the front end.Sometimes, the article or product description may contain rich HTML tags, which are designed to provide exquisite formatting on the detail page.However, in some other scenarios, such as displaying content summaries on list pages, as SEO descriptions (meta description), or simply to avoid style conflicts in certain specific UI elements, we may only need the plain text form of the content without any HTML tags.

AnQiCMS's template system is based on Django template engine syntax, which provides powerful filter functions to help us easily achieve this goal.It includes a variety of filters, which can process the content of variables, including a tool specifically used to remove HTML tags.

To make the content in the template display only plain text, the core is to use appropriate filters to "strip" HTML tags. This mainly uses two very practical filters:striptagsandremovetags.

Completely strip all HTML tags: usestriptagsFilter

striptagsThe filter is your first choice, if you want to completely remove all HTML tags from the content and only retain pure text information.The way it is used is very simple and intuitive, just like 'peeling off' all the formatting from a piece of text.

For example, your article detail variablearchive.ContentOr description variablearchive.DescriptionMay include<p>/<strong>/<a>such tags, if you directly output in the template{{ archive.Description }}AnQiCMS for security reasons will default to escaping HTML tags, which<p>displayed as&lt;p&gt;，The user will see the original HTML code instead of the rendered effect. And if you use{{ archive.Description|safe }}，the tags will be normally parsed and rendered by the browser.

However, when your goal is plain text, you can use it like thisstriptags:

{# 假设archive.Description内容为：<p>这是一段<b>带有</b>HTML标签的描述。</p> #}
<p>文章摘要：{{ archive.Description|striptags }}</p>

{# 假设archive.Content内容包含大量HTML排版 #}
<div class="summary-text">
    {{ archive.Content|striptags }}
</div>

After|striptagsAfter the filter processing, no matterarchive.Descriptionorarchive.ContentThis contains a complex HTML structure, and the output will be something like 'This is a description with HTML tags.'This is a plain text, all HTML tags will be cleanly removed.

Selective removal of HTML tags: useremovetagsFilter

In certain more refined scenarios, you may not want to remove all HTML tags, but rather retain some specific tags, such as keeping only<strong>Labels are used to emphasize keywords while removing all other labels. At this time,removetagsThe filter comes into play.

removetagsThis allows you to specify one or more HTML tag names (separated by commas), which will precisely remove these specified tags while retaining the other unspecified tags.

The usage is as follows:

{# 假设articleContent内容为：<p>欢迎<b>使用</b><i>AnQiCMS</i>的<strong>强大功能</strong>。</p> #}
{# 我们只希望移除 <p>、<i> 标签，保留 <b> 和 <strong> #}
<div class="partially-formatted-text">
    {{ articleContent|removetags:"p,i"|safe }}
</div>

In the above example, the output content will be "Welcome".UseAnQiCMSPowerful features.”. It can be seen that,<i>the tags have been removed, and<b>and<strong>The label is retained. It is noted that if you want the retained label to be rendered normally by the browser rather than displayed as raw HTML code, then inremovetagsAfter that, usually it is also necessary to add|safeFilter.

Recommended for actual application

  • List page summary and SEO description:This is the most common pure text requirement scenario. When displaying a list of articles or products, a brief summary is usually shown. At this time, using|striptagsEnsure that all output is plain text, avoiding HTML tags that may disrupt page layout or affect SEO tool crawling.
  • Front-end JS content operation:If you need to get the innerText or textContent of a DOM element through JavaScript, then provide plain text content at the back-end template level, which can simplify the writing of front-end scripts.
  • Rich text and plain text coexist:In the article detail page, you can still use{{ archive.Content|safe }}to render the complete HTML content; while in the sidebar or Meta information area of the same page, you can use{{ archive.Description|striptags }}to obtain a plain text summary.

These filters of AnQiCMS provide great flexibility for content display, allowing us to accurately control the presentation of content according to different needs, thereby creating a more professional and user-friendly website user experience.

Common Questions (FAQ)

  1. |striptagsand|safeWhat are the differences between filters? |striptagsThe function of the filter is to remove all HTML tags from the content, leaving only plain text. And|safeThe function of the filter is to inform the AnQiCMS template engine that this content is safe and does not require HTML entity escaping. It can be rendered directly as HTML code on the page. In simple terms,striptagsStrip HTML,safeAllow HTML to be rendered. If you want to display the HTML content in the original content, use|safe; If you want to remove all HTML and only leave plain text, use|striptags.

  2. |striptagsWill it remove all formats, including line breaks? |striptagsMainly for removing HTML tags, it usually will not remove natural line breaks in the text content.\n）。如果你想将这些换行符也转换成HTML的 English<br>标签，可以先用 English|striptags移除HTML标签，然后再使用 English|linebreaksbror|linebreaksfilter. For example:{{ archive.Content|striptags|linebreaksbr }}.

  3. If I only want to keep specific HTML tags but also make sure the final output is plain text, how should I operate?If you want to keep for example<strong>or<em>Such emphasis tags, but do not want them to be displayed in HTML form, but represented by special characters in plain text (such as asterisks or underscores), thenremovetagsIt may not be**a choice.removetagsThe specified HTML tags will be retained.To convert these tags into semantic expressions in plain text, it usually needs to be implemented on the backend (while content is being edited) or through more complex template logic (such as regular expression matching and replacement), rather than simply relying on these two tag stripping filters.striptagsto ensure that the final output is pure text without any tags.