html不解析{标题}等大括号占位符，因其仅为普通文本；需js手动替换或引入mustache.js等模板库，并配置分隔符为{ }才能生效。
HTML 本身不解析 {标题} 或 {日期} 这类大括号占位符——它们只是普通文本，浏览器会原样显示。想让这些变成真实内容，必须靠外部机制介入替换。
为什么直接写 {标题} 在 HTML 里不生效
HTML 是静态标记语言，没有内置模板引擎。{标题} 不是 HTML 标准语法，也不是 JS 原生支持的插值语法（JS 的模板字符串用的是 `{title}`，且必须在反引号内运行）。浏览器遇到 {标题}，就当它是普通字符渲染出来，不会做任何替换。
- 常见错误现象：页面上真出现了
{标题}四个字，而不是实际标题 - 根本原因：缺少执行替换的上下文——要么没加载 JS 脚本，要么没调用对应替换函数，要么模板引擎未初始化
- 注意：
<template></template>标签或data-*属性本身也不自动解析占位符，它们只是容器或存储位置
用 JavaScript 手动替换 {标题} 和 {日期}
最轻量、无需框架的方式：用 innerHTML + String.prototype.replace()。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const title = "我的第一篇博客";
const date = new Date().toISOString().split("T")[0]; // 例如 "2024-05-20"
<p>document.body.innerHTML = document.body.innerHTML
.replace(/{标题}/g, title)
.replace(/{日期}/g, date);</p>
- 必须加
g标志，否则只替换第一个匹配项 - 如果 HTML 中有多个
{标题}，这个方法能全部替换；但要注意：它会破坏已绑定的事件监听器（因为重写了innerHTML） - 更安全的做法是限定作用域，比如只替换某个
<div id="content"> 内部：<code>document.getElementById("content").innerHTML = ... - 避免对整个
document.body操作，尤其页面含表单、动态组件时
用 mustache.js 或 handlebars 做真正模板渲染
如果你需要复用模板、支持条件/循环、避免手动字符串替换，推荐引入轻量模板库。以 mustache.js 为例：
<script src="https://unpkg.com/mustache@4.2.0/mustache.min.js"></script><script type="text/template" id="tpl">
<h1>{标题}
<p>发布于：{日期}
</script><p></p><div id="render-here"></div><p><script>
const data = {
标题: "前端调试小技巧",
日期: new Date().toLocaleDateString("zh-CN")
};
const html = Mustache.render(
document.getElementById("tpl").textContent,
data
);
document.getElementById("render-here").innerHTML = html;
</script></p>
-
mustache.js默认使用双大括号{{标题}}，但支持自定义分隔符：Mustache.tags = ["{", "}"]才能匹配你写的{标题} - 务必在调用
Mustache.render()前设置好Mustache.tags，否则默认不识别单层大括号 -
handlebars不支持单层大括号，必须用{{标题}}，且需预编译模板才能高效运行 - 这类库会自动转义 HTML 字符（如
→ <code><），防止 XSS；若需渲染原始 HTML，mustache 用{{{标题}}}（三个大括号）
真正难点不在怎么写占位符，而在于「谁来解析它」和「什么时候替换」。手写 replace() 看似简单，但容易误毁 DOM 状态；用模板库则要小心分隔符配置和上下文生命周期。别假设浏览器懂你的大括号——它只认标准标签和合法属性。
