用 matchall() 提取 html 模板占位符需匹配实际语法（如{{...}}、${...}、[[...]]），正则须带 g 标志并用具名捕获组提取内容，注意转义、注释及上下文干扰，推荐封装为返回 key/raw/index 的结构化函数。
要用 matchAll() 提取 HTML 模板中的动态占位符，关键是写对正则表达式，并正确处理全局匹配和迭代结果。
明确占位符的常见格式
大多数模板（如简易模板引擎、前端预编译模板）使用类似 {{name}}、${user.id} 或 [[title]] 的语法。你需要先确认自己模板中实际使用的占位符样式，再设计正则。例如：
-
{{…}}：双大括号，支持嵌套点号或空格，如{{ user.name }} -
${…}：ES6 模板字符串风格，常出现在 JS 字符串内，如<div>${msg}</div> -
[[…]]：自定义简洁语法，避免与 Vue/JSX 冲突
用 matchAll() 提取所有匹配项
matchAll() 返回一个可迭代对象，需用 for...of 或展开运算符遍历。正则必须带 g（全局）标志，否则只返回第一个匹配。推荐使用具名捕获组提取内容主体：
const template = `<h1>{{ title }}</h1><p>Welcome, {{ user.name }}!</p>`;
const regex = /{{\s*(.*?)\s*}}/g;
const matches = [...template.matchAll(regex)];
<p>matches.forEach(match => {
console.log(match[1]); // "title", "user.name"
});</p>
注意：match[0] 是完整匹配（如 "{{ title }}"），match[1] 是第一个捕获组内容（即去掉符号后的占位符名）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
处理转义、注释和边界情况
真实 HTML 模板中可能混入注释、JS 字符串、CSS 或已转义的占位符，比如：
-
<!-- {{ hidden }} -->：HTML 注释里的占位符通常应忽略 -
<script>console.log("{{ not a placeholder }}");</script>：JS 字符串内的不应提取 -
{{\{\{ escaped \}\}}}或\{\{ raw \}\}：转义写法需在正则中排除
纯正则无法完美区分上下文，若模板复杂，建议先做简单预处理（如剔除注释块），或改用解析器（如 DOMParser + 遍历文本节点）。对多数轻量场景，加限制性正则更实用：
// 更安全：禁止前后紧邻字母/数字/下划线（避免匹配到 class="{{active}}" 中的误判）
const safeRegex = /(?<h3>返回结构化结果便于后续使用</h3><p>直接遍历 <code>matchAll</code> 结果略显原始。可封装为函数，返回含位置、原始文本、键名的数组：</p><pre class="brush:php;toolbar:false;">function extractPlaceholders(str, pattern = /{{\s*(.*?)\s*}}/g) {
return Array.from(str.matchAll(pattern), (m) => ({
key: m[1].trim(),
raw: m[0],
index: m.index
}));
}
<p>// 使用
const placeholders = extractPlaceholders(template);
// → [{ key: "title", raw: "{{ title }}", index: 5 }, ...]</p>这样既保留原始信息，又方便去重、校验或映射数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
