How to use `split` and `join` filters to standardize user tag inputs?

In the daily content operation of AnQi CMS, the tags (Tag) submitted by users often face a common problem: inconsistent formatting.Some users are accustomed to separating with commas, some use semicolons, and even Chinese commas or spaces directly.These irregular inputs, if directly displayed 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.

Fortunately, the powerful template engine of Anqi CMS providessplitandjointhese very practical filters, which can help us efficiently standardize the tags entered by users.

Label input 'standardization' challenge

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

• SEO, CMS, AnQiCMS(English comma with space)
• SEO;CMS;AnQiCMS(English semicolon)
• SEO，CMS，AnQiCMS(Chinese comma)
• SEO CMS AnQiCMS(Space)
• SEO , CMS ; AnQiCMS(Mixed separators with extra spaces)

Our goal is to process any user input into a unified format, such as a clean tag array, or a comma-separated string in English with no extra spaces, ensuring each tag is independent and a valid word without any extra spaces.

splitFilter: Split strings into arrays

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

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

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

If the user is using semicolons to separate, we just need to change the separator to semicolon:

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

But when the user's input becomes complex, such asSEO, CMS; AnQiCMS， 网站优化In cases where multiple separators and extra spaces are mixed, using a single separator may not be able to fully decompose. In this case, 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", " 网站优化"]，注意其中的空格 #}

By this step, we have unified all tags with English commas separated, although some extra spaces may still remain, but it has laid a foundation for the next step of processing.

joinFilter: Join array elements into a string

jointhe filter meetssplitThe function does the opposite, it takes an array and joins all the elements of the array into a single string with a specified separator. Its basic usage is:{{ 数组 | join:"分隔符" }}.

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

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

Combine usesplitandjoinStandardize labels

Now, let's combine these two filters to implement standardized processing of user tags.Our goal is to display the tags in a clean and uniform comma-separated format, or as individual tag links, regardless of the format of the tags entered by the user.

Suppose the user fills in the tag 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. Next,splitThe filter splits this string into an initial array. While traversing this array, we used a filter to process each label item.trimThe filter is used to remove excessive leading and trailing spaces, and thenif cleanTag != ""Judge 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 row 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 and then use themjoinThe filter is connected in a unified format (for example,).

By flexible applicationsplitandjoinThese are two simple and powerful filters, you can easily handle the label data entered by users in the AnQi CMS, making it unified, tidy and easy