HTML模板逻辑引擎实现原理：从字符串替换到DOM映射-html教程-PHP中文网

不能用 innerhtml + 字符串替换实现模板逻辑，因其会销毁节点导致事件丢失、输入状态重置、xss风险暴露；应使用 template + clonenode(true) 安全克隆并遍历文本节点替换变量。

html模板逻辑引擎实现原理：从字符串替换到dom映射

直接用 innerHTML 拼接模板字符串做动态渲染，等于主动放弃事件绑定、输入状态、XSS防护三道防线——这不是“快”，是埋雷。

看似最直白的方案，实际在真实 DOM 场景中会立刻崩掉：

innerHTML 会销毁已有节点，所有绑定的事件监听器、input 光标位置、video 当前播放时间全部丢失
浏览器对非法嵌套（如 <p></p> <div></div>）会自动修正 DOM 结构，导致你预期的节点层级错乱
若变量值含 <script>alert(1)</script>，虽不执行脚本，但若后续用 createContextualFragment 或手动注入，极易滑向 XSS
无法区分文本节点和属性插值（比如 title="{{tip}}" 和 <span>{{tip}}</span>），统一走字符串替换必然漏处理

这是目前唯一能保留结构语义、支持任意合法 HTML 片段、且天然隔离执行上下文的方式：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

把模板写进 <template id="user-card"><div class="card"> <h3>{{name}}</h3> <span>{{age}}</span> </div></template>
用 document.getElementById('user-card').content.cloneNode(true) 得到一个干净的 DocumentFragment
遍历所有文本节点，对 node.textContent 做正则替换（如 /\{\{(\w+)\}\}/g），只动内容，不动结构
对属性插值需单独处理：遍历所有元素，检查 el.attributes，匹配 value.indexOf('{{') !== -1，再用 el.setAttribute(key, renderValue)

如果你只是解析一段纯展示 HTML（比如后台返回的富文本、日志片段），不需要绑定事件或维护状态，DOMParser 是更轻量的选择：

new DOMParser().parseFromString(htmlStr, 'text/html') 返回完整 Document 对象，可直接 querySelector 或遍历
它不会执行 <script></script>，也不触发样式计算或布局，纯解析阶段无副作用
注意：它只能正确解析可作为子元素的标签；<tr>、<code><td> 单独传入会变成孤立文本节点——得包一层 <code><table><tbody>...</tbody></table>
IE10+ 支持，Safari 9.1+，不兼容旧版移动端 WebView

想支持条件、循环、组件嵌套等逻辑，字符串替换已彻底失效，必须升级到 AST 层：

先用正则或专用 parser（如 parseHtmlToAst.js）把模板字符串转成抽象语法树，每个节点含 tagName、attrs、children、type（TEXT / EXPRESSION / IF / FOR）
遍历 AST，对 type === 'EXPRESSION' 的节点，用 with(data) { return eval(expr) }（慎用）或预编译函数（如 art-template 的 $$out += ...）求值
最终生成的不是字符串，而是类似 h('div', { className: 'list' }, [ h('p', {}, data.items.map(...)) ]) 这样的 VNode 结构
diff 和 patch 阶段才能真正复用节点、保留 input 状态、避免重排——但代价是引入编译时或运行时 AST 构建开销