In the daily content operation of AnQi CMS, the tags (Tag) submitted by users often face a common problem: inconsistent format.Some users are accustomed to using commas to separate, some use semicolons, and some may even use Chinese commas or simply spaces.These irregular inputs, if displayed directly on the website front end, not only affect the aesthetics, but may also reduce the usability of the tags, for example, causing trouble when generating tag clouds or performing SEO optimization.

It is fortunate that the powerful template engine of AnQi CMS providessplitandjoinThese two very practical filters can help us efficiently standardize the tags entered by users.

Label input "standardization" challenge

Imagine, when users input tags in the background, they may encounter the following situations:

  • SEO, CMS, AnQiCMS(English comma followed by space)
  • SEO;CMS;AnQiCMS(English semicolon)
  • SEO，CMS，AnQiCMSEnglish comma
  • SEO CMS AnQiCMSSpace
  • SEO , CMS ; AnQiCMSMixed separators with extra space

Our goal is to process whatever input the user provides into a unified format, such as: a clean array of tags, or a string separated by English commas and spaces, ensuring that each tag is an independent, valid word without any extra spaces.

splitFilter: Split the string into an array

splitThe filter, as the name implies, is to 'split' a string into an array (or called a slice) according to the specified delimiter. Its basic usage is:{{ 变量 | split:"分隔符" }}.

For example, if we have a stringrawTags = "SEO,CMS,AnQiCMS"You can use it like thissplitFilter:

{% set rawTags = "SEO,CMS,AnQiCMS" %}
{% set tagArray = rawTags|split:"," %}
{# tagArray 现在是一个包含 ["SEO", "CMS", "AnQiCMS"] 的数组 #}

If the user is using semicolons separated, we just need to change the delimiter to semicolon:

{% set rawTags = "SEO;CMS;AnQiCMS" %}
{% set tagArray = rawTags|split:";" %}
{# tagArray 现在是一个包含 ["SEO", "CMS", "AnQiCMS"] 的数组 #}

But, when the user's input becomes complex, likeSEO, CMS; AnQiCMS， 网站优化When mixed with multiple delimiters and extra spaces, using a single delimiter may not fully decompose. At this point, we can combinereplaceFilter, first replace all irregular delimiters with one, and then proceedsplitOperation.

For example, we can first replace semicolons and Chinese commas with English commas:

{% set rawTags = "SEO, CMS; AnQiCMS， 网站优化" %}
{% set tempTags = rawTags|replace:";","," %} {# 将分号替换为逗号 #}
{% set tempTags = tempTags|replace:"，","," %} {# 将中文逗号替换为逗号 #}
{% set tagArray = tempTags|split:"," %}
{# tagArray 此时可能包含 ["SEO", " CMS", " AnQiCMS", " 网站优化"]，注意其中的空格 #}

Through this step, we have unified all tags with English commas, although there may still be some extra spaces, it has laid a foundation for the next step.

joinFilter: Reconnect the array into a string

joinFilter is related tosplitThe role is exactly opposite, it receives an array and concatenates all the elements of the array into a single string with a specified delimiter. Its basic usage is:{{ 数组 | join:"分隔符" }}.

For example, if we have a label arraytagArray = ["SEO", "CMS", "AnQiCMS"]You can use it like thisjoinFilter:

{% set tagArray = ["SEO", "CMS", "AnQiCMS"] %}
{% set tagString = tagArray|join:", " %}
{# tagString 现在是 "SEO, CMS, AnQiCMS" #}

Combine usesplitandjoinImplement label standardization

Now, let's combine these two filters to achieve standardization of user tags.Our goal is that no matter what format of tags the user inputs, they should be displayed as clean, uniform, comma-separated with spaces, or displayed individually as separate tag links.

Assuming the user has filled in the label input box in the background:搜索引擎优化,CMS ;AnQiCMS ,Go语言

{% set userInputTags = "搜索引擎优化,CMS ;AnQiCMS ,Go语言" %}

{# 第一步：标准化分隔符。将分号和中文逗号替换为英文逗号 #}
{% set standardizedDelimiterTags = userInputTags|replace:";","," %}
{% set standardizedDelimiterTags = standardizedDelimiterTags|replace:"，","," %}

{# 第二步：使用 split 过滤器将字符串拆分为数组。 #}
{% set tagArray = standardizedDelimiterTags|split:"," %}

{# 第三步：遍历数组，对每个标签进行清理（去除首尾空格），并输出。
   这一步可以直接用于生成独立的标签链接，或者为下一步的 join 做准备。 #}
<p>标准化后的标签：</p>
<ul>
{% for tagItem in tagArray %}
    {% set cleanTag = tagItem|trim %} {# 使用 trim 过滤器去除标签前后的空格 #}
    {% if cleanTag != "" %} {# 确保不是空标签 #}
        <li><a href="/tags/{{ cleanTag|urlencode }}" rel="tag">{{ cleanTag }}</a></li>
    {% endif %}
{% endfor %}
</ul>

{# 第四步（可选）：如果需要一个统一的逗号分隔字符串来展示，可以使用 join 过滤器 #}
{% set finalDisplayTags = [] %}
{% for tagItem in tagArray %}
    {% set cleanTag = tagItem|trim %}
    {% if cleanTag != "" %}
        {% set finalDisplayTags = finalDisplayTags|add:cleanTag %} {# 将清理后的标签添加到新数组 #}
    {% endif %}
{% endfor %}
<p>统一格式的标签字符串：{{ finalDisplayTags|join:", " }}</p>

In the above example, we first go throughreplaceThe filter unified the delimiter, ensuring that all tags are separated by English commas. Then,splitThe filter splits this string into an initial array. When traversing this array, we use the filter for each label item.trimThe filter to remove excess leading and trailing spaces, and throughif cleanTag != ""Determine and filter out empty tags caused by consecutive delimiters.

Finally, we demonstrated two common uses:

  1. Generate a list of independent tag links: Directly inforGenerate for each cleaned tag in the loop<a>Link, convenient for users to click and browse related content.
  2. Generate a label string in a unified format.If you need to display a series of neatly arranged tags at a certain location (such as the bottom of an article page), you can collect the cleaned tags into a new array first, and then usejoinFilter in a uniform format (such as,) connected together.

By using flexibilitysplitandjoinThese two simple yet powerful filters allow you to easily handle label data entered by users in the CMS, ensuring that it is presented uniformly, neatly, and easily on the website front end.