During AnQiCMS template development, we often use various filters to process and format content. Among them,linebreaksandreplaceThese are two very practical filters, used for handling newline characters in text and for string replacement.However, when these two filters are applied to a piece of content simultaneously, the order of their execution will directly affect the final output result.Understanding this mechanism can help us control the display of content more accurately.

Understand the execution mechanism of AnQiCMS template filters

AnQiCMS's template engine supports syntax similar to Django templates, and the execution mechanism of its filters follows a simple and intuitive principle: Execute from left to rightThis means that when you chain multiple filters on a variable, the output of the previous filter becomes the input for the next filter. For example,{{ 变量 | 过滤器A | 过滤器B }}Will first变量Hand over to过滤器AProcess and then hand over过滤器AHand over the processed result again过滤器BProcess and output finally过滤器BThe result.

Get to know in-depthlinebreaksandreplaceFilter

Before discussing the execution order, let's review the basic functions of these two filters:

  • linebreaksFilterThis filter aims to replace line breaks in text (\nConvert to HTML paragraph<p>And newline<br/>Tag. It will treat consecutive two newlines as the start of a new paragraph and use\n\nto create a new paragraph.<p>...</p>Enclose it; a single newline character (\n) will be converted to<br/>. This is very useful for formatting plain text content into a readable HTML
  • replaceFilter: As the name implies,replaceThe filter is used to find a specific 'old text' in a string and replace it with a new text. Its usage is typically{{ 变量 | replace:"旧文本,新文本" }}It is a general string manipulation tool that can be used to modify any character sequence in the content.

The impact of execution order:replaceInlinebreaksBefore or after?

Now, we combine the 'left-to-right' execution principle to analyze two common combination methods.

Scenario one:{{ 变量 | replace:"旧文本,新文本" | linebreaks }}

In this order,replaceThe filter will first perform a replacement operation on the original text content. This means that whether you want to replace plain text, special characters, or newline characters in the original text, it will belinebreaksCompleted before intervention.

Process workflow:

  1. replaceExecute: First,replaceThe filter will scan the original.变量Content, and replace all occurrences of the 'old text' with the 'new text' according to the defined rules. If the 'old text' contains\n, then these newline characters will also be replaced in this step.
  2. linebreaksExecuteThe following, after passing throughreplaceThe processed string (which may no longer contain the original newline, or the newline may have been modified) will be passed as input tolinebreaksThe filter. At this point,linebreaksIt will generate accordingly based on the newline character status (if any) in the current string<p>and<br/>.

Example and impact:

Suppose we have a piece of original text“第一行。\n第二行。\n\n第三段。”

  • Objective:Before formatting as HTML, replace all newline characters with a single space to make it a single-line text.
  • Usage: {{ "第一行。\n第二行。\n\n第三段。" | replace:"\n"," " | linebreaks | safe }}
  • Result analysis:
    1. replaceFirst, replace all\nReplace with a single space. The original text becomes“第一行。 第二行。 第三段。”.
    2. linebreaksThis single-line text has no newline characters, it will be treated as a complete paragraph, and<p>be enclosed in tags, without inserting anything.<br/>.
    3. Final output (simplified):<p>第一行。 第二行。 第三段。</p>

This order applies when you want to thoroughly clean, standardize, or modify specific content before converting text to an HTML structure.For example, unify the processing of specific characters, remove unnecessary whitespace, or as shown in the above example, change the line structure of the text before paragraph formatting.

Scenario two:{{ 变量 | linebreaks | replace:"旧文本,新文本" }}

In this order,linebreaksThe filter will first convert the original text content to an HTML structure, thenreplaceThe filter will then replace the generated HTML code.

Process workflow:

  1. linebreaksExecute: First,linebreaksThe filter will generate a string containing, based on the line breaks in the original text<p>and<br/>HTML tags.
  2. replaceExecute: Next, this string already containing HTML tags will be passed as input toreplaceThe filter. At this point,replaceReplace 'old text' with 'new text' in HTML code.

Example and impact:

Suppose we have a piece of original text“第一行。\n第二行。\n\n第三段。”

  • Objective:After formatting to HTML, replace the specific word 'line' with 'sentence' in HTML.
  • Usage: {{ "第一行。\n第二行。\n\n第三段。" | linebreaks | replace:"行","句" | safe }}
  • Result analysis:
    1. linebreaksFirst, convert the original text to HTML:<p>第一行。<br />第二行。</p><p>第三段。</p>.
    2. replaceAfter receiving this HTML string, search for the word "line" and replace it with "sentence".
    3. Final output (simplified):<p>第一句。<br />第二句。</p><p>第三段。</p>

This order applies to what you need to modify bylinebreaksThe situation where a specific HTML structure or content is generated by (or other HTML generation filter). However, it should be noted that if the "old text" matches the internal HTML tags (such as<p class="旧文本">Or the content that may be replaced may destroy the HTML structure, which may lead to unexpected results or page rendering issues. Therefore, it is more cautious to usereplaceNeed to be more careful.

Core recommendation and **practice

Generally speaking, we recommend following the principle ofProcessing data first, then formatting for display. This means:

  1. Data cleaning and content modification (such asreplace) is preferred over structured formatting (such aslinebreaks)If you want to modify, clean, or standardize the text content itself, then you should letreplaceInlinebreaksThe previous action was executed. This ensuresreplaceThe operation acts on the original text, avoiding complexity or unexpected results due to HTML tags.
  2. Only when you explicitly need to modify the bylinebreaksThe HTML structure is generated whenreplaceplaced after it.In this case, make sure yourreplaceThe rule is for HTML tags and attributes, not for raw text. And, it is important to test carefully to avoid breaking the validity of HTML.

Understanding the sequence of filter execution is crucial for writing robust and predictable AnQiCMS templates.By practicing and testing, you can better understand their behavior, thereby providing high-quality website content to users.

Frequently Asked Questions (FAQ)

1. Why do I usereplaceThe filter does not have an effect when replacing line breaks in text, but there are indeed line breaks in my text?

This is very likely because you havereplaceplaced the filterlinebreaksafter the filter.linebreaksThe filter will first convert the text in\nto<p>or<br/>HTML tags. Once these line breaks have been converted into HTML tags,replacethe filter can no longer find\nThis character should be replaced. The correct way is, if you want to replace the newline character in the original text, you should usereplacethe filter placedlinebreaksbefore the filter, for example:{{ 变量 | replace:"\n"," " | linebreaks | safe }}.

2.replaceCan the filter be used to modifylinebreaksGenerated<p>or<br/>Tag?

OK. IfreplaceThe filter is placedlinebreaksAfter that, it will act onlinebreaksThe already generated HTML string. For example, if you want to convert all<p>Replace tag with<div>Tag, you can try `{{ variable | linebreaks | replace: “

”,”

Hello

”,”
World