How to remove HTML tags in AnQiCMS template and display only plain text content?

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

The AnQiCMS template system is based on Django template engine syntax, which provides powerful filter functions to help us easily achieve this goal.It is built-in with various filters, which can process variable content, 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. Here, two very practical filters will be mainly used:striptagsandremovetags.

Completely strip all HTML tags: usestriptagsFilter

striptagsThe filter is your preferred 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, 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>And tags, if you output directly in the template{{ archive.Description }}，AnQiCMS for security reasons will default to escaping HTML tags, and will<p>displayed as<p>, The user will see the original HTML code instead of the rendered effect. And if you use{{ archive.Description|safe }}, tags will be parsed and rendered normally by the browser.

But 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, no matterarchive.Descriptionorarchive.ContentIt originally contained a very complex HTML structure, the output will be something like 'This is a description with HTML tags.'This 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 keep some specific tags, such as only keeping<strong>Labels are used to emphasize keywords while removing all other labels. At this time,removetagsThe filter comes into play.

removetagsAllow you to specify one or more HTML tag names (separated by commas), it will precisely remove the specified tags while retaining other tags that are not specified.

How to use:

{# 假设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 will be "Welcome"UseAnQiCMS'Powerful features. As you can see,<i>the tags have been removed, and<b>and<strong>The tag is preserved. It should be noted that if you want the tag to be rendered normally by the browser instead of displaying the original HTML code, then inremovetagsAfter that, it is usually necessary to add|safefilter.

Actual application suggestions

• List page summary and SEO description:This is the most common pure text requirement scenario. When displaying an article list or product list, a brief summary is usually displayed. At this time, use|striptagsMake sure the output is plain text to avoid HTML tags from breaking the page layout or affecting the crawling of SEO tools.
• Front-end JS operation content:If you need to get the innerText or textContent of a DOM element through JavaScript, then provide plain text content on the backend template level, which can simplify the writing of frontend scripts.
• Rich text and plain text coexist:You can still use it on the article detail page,{{ archive.Content|safe }}To render complete HTML content; while in the sidebar or Meta information area of the same page, you can use{{ archive.Description|striptags }}to get the plain text summary.

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

Frequently Asked Questions (FAQ)

1. |striptagsand|safeWhat are the differences between filters? |striptagsThe filter's function is to remove all HTML tags from the content, leaving only plain text. And|safeThe filter's role is to inform the AnQiCMS template engine that this content is safe, does not require HTML entity encoding, and 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 in the original content, use|safe; If you want to remove all HTML and leave only plain text, use|striptags.

2. |striptagsWill it remove all formats, including line breaks? |striptagsIt is mainly aimed at removing HTML tags, it usually will not remove the natural line breaks in the text content (\nIf you want to convert these line breaks into HTML's<br>tags, you can use them first|striptagsRemove the HTML tags first, then use them|linebreaksbror|linebreaksa filter. For example:{{ archive.Content|striptags|linebreaksbr }}.

3. If I only want to keep specific HTML tags but also make sure the final result 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 rather represented by special characters in plain text (such as asterisks or underscores), thenremovetagsMaybe not **choose.removetagsIt retains the specified HTML tags. To convert these tags to plain text semantic expressions, it is usually necessary to do so on the backend (during content editing) or through more complex template logic (such as regular expression matching and replacement), rather than relying solely on these tag stripping filters.If the ultimate goal is plain text, even if some tags are retained, it should be usedstriptagsTo ensure that the final output is pure text without any labels.