如何将修改后的渲染HTML转换回含变量的Nunjucks模板？

你需要把渲染后手动修改过的HTML，还原成带有原Nunjucks变量、模板语法的模板文件，同时保留新增的HTML内容。以下是几种可行的实现方案：

方案一：基于原模板的差异对比替换（推荐，依赖原模板） #

这是最可靠的方案，前提是你能获取到原始的Nunjucks模板文件：

1. 生成基准渲染结果
   先用原模板和原始渲染数据，生成一份未修改的基准HTML，作为后续对比的参照。

2. 对比找出修改差异
   用DOM对比逻辑（自己写递归节点对比，或用diffhtml这类工具），对比修改后的HTML和基准HTML：

   • 标记出新增的节点（比如示例里的<img src="abc.png" />）
   • 定位原模板动态语法对应的渲染内容范围（比如<h1>hello world</h1>对应{{heading}}，循环生成的<div>item x</div>列表对应{% for %}块）

3. 替换动态内容并保留修改

   • 将修改后的HTML中，属于原动态语法渲染的静态内容，替换回对应的Nunjucks语法（比如把<h1>hello world</h1>改回<h1>{{heading}}</h1>）
   • 把循环生成的重复节点块，替换回原模板的{% for item in items %}循环代码
   • 完全保留所有手动新增/修改的节点（比如示例里的img标签）

方案二：基于DOM标记的反向替换（无原模板时可用） #

如果无法拿到原模板，可以在第一次渲染模板时就给动态节点打标记，方便后续反向解析：

1. 渲染时添加标记属性
   修改原模板，给所有动态生成的节点添加自定义data-*属性，标记对应的模板语法：

   <div class="ps-4">
       <h1 data-nunjucks-key="heading">{{heading}}</h1>
       {% if isShowLi %}
           <div class="px-4" data-nunjucks-block="item-loop">
               {% for item in items %}
                   <div>{{item.name}}</div>
               {% endfor %}
           </div>
       {% endif %}
   </div>
   

2. 修改HTML时保留标记
   手动修改渲染后的HTML时，不要删除这些data-*标记属性。

3. 反向生成模板
   解析修改后的HTML，根据标记属性替换内容：

   • 找到带data-nunjucks-key="heading"的h1标签，把内容替换为{{heading}}
   • 找到带data-nunjucks-block="item-loop"的容器，把里面的静态列表替换回原循环语法{% for item in items %}<div>{{item.name}}</div>{% endfor %}
   • 保留所有新增的节点和修改的属性

方案三：正则/简单反向解析工具（仅适合简单场景） #

如果你的模板逻辑很简单（只有变量，没有复杂的条件、循环），可以用正则匹配来反向替换：

• 提前记录变量和渲染后内容的映射（比如heading对应hello world）
• 用正则把静态文本替换回对应的{{变量}}语法

但这种方法对嵌套条件、循环块这类复杂语法支持很差，容易出错，仅适合极简单的场景。

关键注意点 #

• 不要修改原模板中动态语法对应的DOM结构（比如不要删除{% if %}块对应的容器），否则反向替换后模板逻辑会被破坏
• 如果修改了动态节点的属性（比如给循环生成的div加了class），要同步把修改后的结构写到模板对应的位置

内容的提问来源于stack exchange，提问作者shoaib siddiqui