寻求可将HTML邮件手动修改内容合并至新生成邮件的JavaScript库

核心逻辑 #

先对比系统原生生成的邮件1和用户手动修改后的邮件1，精准识别出用户做的所有改动（比如修改文本、调整样式、增删内容），再把这些改动映射到新生成的邮件2上——重点是要区分开用户的手动修改和系统因参数变化产生的新增/删除内容，不能误覆盖邮件2的新内容。

推荐使用的JS库 #

1. diff-dom #

专门处理DOM结构的差异对比与补丁应用，直接操作DOM元素，对HTML邮件这类结构化内容适配性极佳。

2. htmldiff-js #

主打HTML字符串的差异对比，能输出带标记的差异内容，也可基于差异实现合并，适合偏好字符串操作的场景。

具体实现步骤（以diff-dom为例，最省心的方案） #

步骤1：将三份邮件转换为DOM对象 #

把三份邮件的HTML字符串转换成可操作的DOM元素：

// 系统原生生成的邮件1
const originalMail1 = document.createElement('div');
originalMail1.innerHTML = '<原始邮件1的HTML代码>';

// 用户修改后的邮件1
const modifiedMail1 = document.createElement('div');
modifiedMail1.innerHTML = '<用户修改后的邮件1的HTML代码>';

// 新生成的邮件2
const newMail2 = document.createElement('div');
newMail2.innerHTML = '<新生成的邮件2的HTML代码>';

步骤2：对比原始邮件1与修改版，生成用户修改补丁 #

用diff-dom对比两个DOM，提取用户的所有修改操作：

const DiffDOM = require('diff-dom');
const dd = new DiffDOM();

// 生成从原始邮件1到修改后邮件1的补丁集合
const userPatches = dd.diff(originalMail1, modifiedMail1);

步骤3：将补丁应用到新邮件2上 #

把提取到的用户修改，直接“打”到新邮件2的DOM上：

// 将用户的修改补丁应用到新邮件2
dd.patch(newMail2, userPatches);

// 此时newMail2的innerHTML就是合并完成的最终邮件HTML
const mergedMailHtml = newMail2.innerHTML;

关键注意事项 #

• 给动态节点加唯一标识：如果邮件包含系统动态生成的元素（比如参数变化时新增的段落），建议给这类元素添加自定义属性（如data-mail-node-id="xxx"），diff-dom可通过该属性更精准匹配节点，避免误改邮件2的新内容。
• 自动忽略无效修改：如果邮件2删除了原始邮件1中的某段内容，diff-dom会自动忽略针对该内容的用户修改，不会触发报错。
• 测试特殊场景：若用户修改了邮件1的某段文本，且邮件2中该文本的容器结构未变，补丁可精准应用；若容器结构被系统修改，提前添加标识即可解决节点匹配问题。

备选方案（htmldiff-js） #

如果更习惯处理字符串而非DOM，可使用htmldiff-js，但需自行编写逻辑将差异转换为可应用的补丁：

const htmldiff = require('htmldiff-js');

// 生成原始邮件1与修改版的差异HTML
const diffResult = htmldiff(originalMail1Html, modifiedMail1Html);
// 需自定义解析diffResult，提取用户修改后再应用到newMail2Html上

该方案需要额外的解析逻辑，不如diff-dom直接操作DOM高效。

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