Cheerio解析HTML时处理模板语法的注意事项

在使用Cheerio解析包含模板语法（如Volist、Smarty等）的HTML文档时，开发者可能会遇到一个特殊现象：文档结构被意外重组。这种情况通常发生在模板语法中包含大括号{}等特殊字符时。

问题现象

当使用Cheerio的默认HTML解析模式处理以下代码时：

<table border="1">
  <tbody>
    {volist name="saixiang_list" id="item"}
    <tr>
      <td>{if $item.is_checked}√{/if}</td>
      {$item.table_html|raw}
    </tr>
    {/volist}
  </tbody>
</table>

解析后的输出结果会出现结构错乱，模板标签被移出表格之外，而表格内部结构被破坏：

{volist name="saixiang_list" id="item"}
    {$item.table_html|raw}
{/volist}
<table border="1">
<tbody><tr>
    <td>{if $item.is_checked}√{/if}</td></tr></tbody>
</table>

原因分析

这种现象源于HTML5规范中的"收养机构算法"(Adoption Agency Algorithm)。该算法是HTML解析器处理某些特殊标记（如<table>、<select>等）时的纠错机制，它会尝试修复不符合规范的HTML结构。

当解析器遇到大括号{}包裹的内容时，由于这些内容不符合标准HTML语法，解析器会将其视为文本节点。但在某些情况下，特别是当这些内容出现在表格等具有严格结构要求的元素内部时，解析器会尝试"修复"文档结构，导致内容被意外移出或重组。

解决方案

Cheerio提供了两种处理方式：

1. 使用XML解析模式：通过设置xml选项，可以禁用HTML特有的纠错算法

const $ = cheerio.load(htmlContent, { xml: true });

2. 转义模板语法：将大括号转义为HTML实体

{table border="1"}
  <tbody>
    &lbrace;volist name="saixiang_list" id="item"&rbrace;
    <tr>
      <td>&lbrace;if $item.is_checked&rbrace;√&lbrace;/if&rbrace;</td>
      &lbrace;$item.table_html|raw&rbrace;
    </tr>
    &lbrace;/volist&rbrace;
  </tbody>
</table>

最佳实践建议

1. 对于主要包含模板的文档，优先使用XML解析模式
2. 如果文档中混合了大量标准HTML和少量模板，可以考虑只转义关键部分
3. 在构建工具链时，可以考虑在Cheerio处理前对模板部分进行标记或注释
4. 对于复杂的模板系统，建议先提取模板部分，处理完HTML结构后再重新插入

理解这一机制有助于开发者在处理包含非标准HTML内容时做出更合理的设计决策，避免因解析器行为导致的意外结果。