How to use AnQiCMS filter to batch modify specific attribute values in HTML content?

In website content management, we often encounter scenarios where we need to uniformly adjust or batch modify specific attribute values in a large amount of HTML content. For example, you may need to update the height attributes of all images, or add specific attributes to some links.relProperties, even adjusting the styles of some tags generated by the rich text editor.AnQiCMS provides flexible tools to meet these needs, among which the batch replacement feature is a direct tool for modifying stored content, and the template filter can dynamically convert content during output, combining both can efficiently manage and optimize website content.

The first part: Using the AnQiCMS background batch replacement function to directly modify the stored content

When your goal is to permanently modify the specific attribute value of the stored HTML content in the database, the "Document Keyword Replacement" feature of AnQiCMS backend is your preferred tool.This feature allows you to define replacement rules and apply them to the entire site content, supporting both simple text replacement and advanced regular expression replacement. Regular expressions are particularly powerful when it comes to precisely modifying HTML attribute values.

1. Function entryIn AnQiCMS backend, navigate to "Content Management" -> "Document Management".Above the document list page, you will see the option 'Document keyword replacement'.Click to enter the feature interface.

2. Configure replacement rulesHere, you need to enter the 'search word' and 'replacement word'.

   • Normal text replacementIf you just want to replace a fixed attribute value (such aswidth="100") with another fixed value (such aswidth="150")，can be directly entered.
   • Regular expression replacementThis is the core of batch modification of HTML specific attribute values. Regular expressions allow you to match complex patterns, thus precisely locating and modifying attribute values.
     • Syntax hintRegular expression rules need to be used{starts with}End. For example,{[0-9]+}You can match consecutive numbers. Combine capturing groups and backreferences to achieve very fine modifications.

3. Practical example: Modify the image width attributeAssuming that all images used in the article content of your website,width="xxx"Such inline properties to define width, now you want to unify the width properties of all imagesmax-width: 100%; height: auto;To achieve better responsive layout, while removing the oldwidthProperty.

   • Search terms (regular expressions):(<img[^>]*?)\swidth="\d+"([^>]*?>)
     • The meaning of this regular expression is:
       • (<img[^>]*?): Capture<img>Label start, as well as any non->character, until encounteringwidththe front of the attribute. This is the first capture group.
       • \swidth="\d+": Match a space,width=", Any number(\d+), and".
       • ([^>]*?>): CapturewidthAfter the attribute to>All content to the end of the tag. This is the second capture group.
   • Replacement word:$1 style="max-width: 100%; height: auto;"$2
     • $1and$2Referenced the first and second capture groups in the regular expression.
     • This means we will retain the other part of the image tag, insert the newstyleattributes, and automatically remove the oldwidthProperty.
   • Apply replacement: Check the content range you want to apply the replacement to (such as all articles, products, etc.), then click to execute. The system will traverse all content and replace it in bulk according to the rules you define.

Important reminder: Be cautious when using regular expressions for batch replacements. It is recommended to test in a development environment first and to back up the database in advance to prevent irreversible content damage due to incorrect operations.

The second part: Combine AnQiCMS filter to dynamically convert and optimize HTML content display

AnQiCMS template filters provide the ability to dynamically transform content when outputting to the front-end page.This modification does not directly change the original HTML content stored in the database, but takes effect immediately when the user browses the page, which is very suitable for optimization and adjustment at the display level.

Filters are usually applied to the output of content variables, with the basic format of{{ 变量名|过滤器名称:参数 }}.

1. replaceFilter: Text-level attribute value replacementAlthough batch replacement in the background is more powerful, in some cases, you may only want to replace on the front end,