Does the `split` filter apply to extracting specific attribute values from HTML content, such as `data-items="item1|item2"`?

In the template development of AnQi CMS, we often encounter situations where we need to handle different types of data. When it comes to extracting specific attribute values from HTML content, for exampledata-items="item1|item2"and hope to further process these values when, `split` filter is a very practical tool. However, its applicability is not directly aimed at HTML parsing, but it acts onThe string data has been obtained.

AnQi CMS template and filter introduction

AnQi CMS uses a syntax similar to the Django template engine, which separates content display from business logic, improving the readability and maintainability of templates. In the template, we use double braces.{{变量}}Output the variable value by{% 标签 %}Control the logical structure, while the filter is{{obj|filter__name:param}}to process and format the variable value in the form of.

The system provides a rich set of built-in filters for string processing, numerical calculations, time formatting, and various other scenarios. Among them,splitFilter is one of the important tools used specifically for string operations.

Deep understandingsplitFilter

According to the AnqiCMS documentation,splitThe core function of the filter is to split a string of a specific format into an array (or slice) according to the specified delimiter. Its basic usage is:

{{ 变量名|split:"分隔符" }}

For example, if you have a string"apple,banana,orange", usingsplitfiltered by comma and space as separators, you get an array containing"apple"/"banana"and"orange"an array:

{% set fruits_string = "apple, banana, orange" %}
{% set fruits_array = fruits_string|split:", " %}
{# fruits_array 现在是：["apple", "banana", "orange"] #}

It should be noted that if the specified delimiter does not exist in the original string,splitThe filter returns an array containing only the original string itself with a length of 1. If the delimiter is empty, it will split the string into an array by each UTF-8 character.

The challenge of extracting HTML attribute values

Now we return to the core issue:splitDoes the filter apply to extracting attribute values from HTML contentdata-items="item1|item2"such as this attribute value?

The answer is:Extract attribute values directly from complete HTML content, the `split` filter is not designed for this, it does not have HTML parsing capabilities.

HTML content is essentially a structured markup language that includes tags, attributes, text, and other elements.The template engine filters usually focus on operating on plain text or structured data, rather than performing complex HTML DOM parsing.<div data-items="item1|item2">...</div>Is asa large stringstored in some content field (such as article detailsarchive.Contentor page contentpage.Content), then the template filter cannot directly “find” thisdivLabel, and it cannot be read directly eitherdata-itemsProperty.

Try to directly parse any HTML at the template level and extract attributes, which not only goes beyond the design intention of most template engines, but may also introduce security risks and performance issues.

splitThe true strength of the filter: processing the obtained strings

Then, how can it be effectively utilized in Anqi CMSsplitto processdata-items="item1|item2"such data? The key is to ensuredata-itemsofProperty valueCan be obtained in pure string form first.

This is usually achieved through the following two more recommended methods:

1. Using a custom content model and fields (recommended practice)One of the core strengths of AnQi CMS is its flexible content model.We can create custom fields for scenarios that require storing this kind of structured data, rather than embedding them in ordinary HTML content (such as rich text editor output).

   For example, we can follow these steps:

   • Create a custom field:In the 'Content Model' management of the Anqi CMS backend (refer tohelp-content-module.md)，select or create a model (such as "article model" or "product model"), and then add a custom field to it.

     • Parameter name:Can be a list of data items or other meaningful names.
     • Call field:Suggest using lowercase English letters, for exampledata_items_list.
     • Field type:Select 'Single line text'.
     • Default value/fill in the content:When publishing articles or products, enter directly in this fielditem1|item2such plain strings.

   • Use the value obtained from the template:When we have published content, and filled in the customized fielddata_items_listin it.item1|item2After that, you can easily get this value in the template. We can get the content of custom fields througharchiveDetailorarchiveParamstags (refer totag-/anqiapi-archive/142.htmlandtag-/anqiapi-archive/146.html) to get the content of custom fields.

     {# 假设我们正在文档详情页，并且自定义字段的调用字段是 data_items_list #}
     {% archiveDetail my_data_string with name="data_items_list" %}
     
     
     {# 此时，my_data_string 的值就是 "item1|item2" #}
     {% set data_array = my_data_string|split:"|" %}
     
     
     {# 现在 data_array 是一个包含 ["item1", "item2"] 的数组，可以循环输出 #}
     <ul>
     {% for item in data_array %}
         <li>{{ item }}</li>
     {% endfor %}
     </ul>
     

     This ensures the structured storage of data, which is convenient for direct access and processing by the template, and is the practice of **handling such needs** in Anqi CMS.

2. Front-end JavaScript processing (when the attribute is already in the rendered HTML)Ifdata-itemsThe attribute already exists in the HTML page rendered by the Anqi CMS template (for example, the HTML structure is output by the hard-coded template or rich text content, and the attribute is included in it), then the most direct method is to use frontend JavaScript to extract and process these values.

   `html

   <!-- 其他内容 -->