最可靠方法是遍历 form.elements 手动读取 value/checked/selected 状态并注入 HTML：对 input/textarea 写 value 属性，select 选项加 selected，checkbox/radio 加 checked；注意 textarea 需转义并用标签体填充，布尔属性统一用无值形式。
用 form.elements 遍历并序列化表单值最可靠
直接 innerHTML 或 outerHTML 拿不到用户填入的表单值，因为 DOM 的 value、checked、selected 等状态不会自动反写回 HTML 属性。必须手动读取当前控件状态再拼回去。
推荐遍历 form.elements（它包含所有可提交字段，包括 input、select、textarea、button）：
function serializeFormToHtml(form) {
const html = form.outerHTML.replace(/>/g, '>').replace(/</g, '<');
let result = html;
for (const el of form.elements) {
if (!el.name) continue;
const attr = el.getAttribute('type') || el.tagName.toLowerCase();
if (el.value && ['input', 'textarea'].includes(attr)) {
result = result.replace(
new RegExp(`(<${attr}[^>]*name="${el.name}"[^>]*)(?=>)`, 'i'),
`$1 value="${el.value.replace(/"/g, '"')}"`
);
} else if (el.tagName === 'SELECT' && el.selectedIndex >= 0) {
const opt = el.options[el.selectedIndex];
result = result.replace(
new RegExp(`(<option[^>]*value="${opt.value}"[^>]*)(?=>)`, 'i'),
`$1 selected`
);
} else if (['checkbox', 'radio'].includes(el.type) && el.checked) {
result = result.replace(
new RegExp(`(<input[^>]*name="${el.name}"[^>]*type="${el.type}"[^>]*)(?=>)`, 'i'),
`$1 checked`
);
}
}
return result;
}
注意：这个逻辑只处理常见字段，不覆盖 contenteditable 或自定义组件；若表单含动态生成项，需确保它们已挂载到 form.elements 中。
遇到 Uncaught DOMException: Failed to execute 'outerHTML' on 'Element' 怎么办
这个错误通常出现在表单嵌套在 Shadow DOM、iframe 或被 Vue/React 等框架接管后——此时原生 outerHTML 不可用或返回空字符串。
立即学习“前端免费学习笔记（深入）”；
- 先检查
form.isConnected是否为true，避免操作已移除节点 - 若在 Shadow DOM 内，改用
form.getRootNode().host?.outerHTML或直接用form.cloneNode(true)后遍历子节点 - 在 React/Vue 项目中，不要在渲染函数里调用该逻辑；应在用户点击“保存”时，从 ref 获取真实 DOM 节点再处理
textarea 换行和特殊字符容易丢，怎么保留原始输入
textarea.value 包含换行符（
），但插入 HTML 时若直接拼进属性值，浏览器会忽略或转义——必须用
表示换行，且所有双引号要转成 "。
更稳妥的做法是不用 value 属性，改用 textContent 填充标签体：
<textarea name="desc">第一行 第二行</textarea>
所以序列化时对 textarea 单独处理：
if (el.tagName === 'TEXTAREA') {
const escaped = el.value.replace(/&/g, '&').replace(/"/g, '"').replace(/
/g, ' ');
result = result.replace(
new RegExp(`(<textarea[^>]*name="${el.name}"[^>]*>)([^<]*)(<\/textarea>)`, 'i'),
`$1${escaped}$3`
);
}
保存后的 HTML 在 Chrome/Firefox 渲染不一致？留意布尔属性写法
比如 checked、selected、disabled 是布尔属性：写成 checked="" 或 checked="checked" 都有效，但部分老解析器（如某些邮件客户端或静态生成工具）只认 checked 无值形式。
建议统一用无值写法，避免冗余：
- 用
el.hasAttribute('checked')判断，而不是el.getAttribute('checked') !== null - 替换时只加
checked，不带等号和引号 - 同理处理
selected、disabled、readonly
真正难的不是拼 HTML，而是让不同环境下的解析器对“已填写状态”的理解一致——哪怕多一行正则，也比靠浏览器猜强。
