Decap CMS自定义小部件正则表达式优化咨询

原正则的潜在问题 #

你的原始正则虽然能匹配部分场景，但存在几个容易导致误匹配或匹配失败的隐患：

• 贪婪匹配风险：.*是贪婪模式，若页面存在多个手风琴组件，可能会从第一个<h[2-6]匹配到最后一个</div>，导致匹配范围过度扩大
• 层级不校验：允许开头是h2、结尾是h3的标签对，不符合HTML规范，也会匹配错误结构
• Class匹配不严谨：.*class="accordion".*会误匹配class="accordion-fake"这类仅包含字符串但并非独立类名的情况，同时无法精准处理class属性前后有其他属性的场景
• 面板内容匹配过度：贪婪模式下，若面板内包含其他</div>标签，会匹配到最后一个闭合标签，导致错误拆分组件

优化后的正则表达式 #

针对上述问题，优化后的正则能更精准匹配符合要求的手风琴结构：

/<h([2-6])(?:\s+[^>]*?class="[^"]*\baccordion\b[^"]*"[^>]*?)>([^<]*)<\/h\1>\n<div class="accordion__panel">\n([\s\S]*?)\n<\/div>/ms

正则各部分说明 #

• h([2-6])：捕获标题层级（2-6），后续用\1引用确保闭合标签与开头层级严格一致
• (?:\s+[^>]*?class="[^"]*\baccordion\b[^"]*"[^>]*?)：非捕获组，匹配标题标签内的属性，通过\b单词边界确保accordion是独立类名，支持class属性前后有其他属性的场景，[^>]*?非贪婪匹配避免跳过标签闭合符
• >([^<]*)<\/h\1>：匹配标题内的纯文本内容（假设无嵌套HTML标签），确保仅匹配到当前标题的闭合标签
• \n<div class="accordion__panel">\n：精准匹配手风琴面板的开头标签及前后换行
• ([\s\S]*?)：非贪婪匹配面板内的任意内容（包括换行），直到遇到单独一行的</div>
• \n<\/div>：匹配面板的闭合标签，要求必须单独一行，符合你给出的结构规范

测试验证 #

正确匹配场景 #

<h2 class="accordion">手风琴标题</h2>
<div class="accordion__panel">
这是Markdown转换后的内容
包含多行文本
</div>

<h4 class="sidebar-accordion accordion">带多类名的标题</h4>
<div class="accordion__panel">
<p>段落内容</p>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
</div>

不会匹配的错误场景 #

<!-- 类名不符合要求 -->
<h3 class="accordion-style">错误标题</h3>
<div class="accordion__panel">
内容
</div>

<!-- 标题层级不匹配 -->
<h2 class="accordion">标题</h2>
<div class="accordion__panel">
内容
</div>
<h3>无关标题</h3>

内容的提问来源于stack exchange，提问作者Daz Lee