Del与Ins标签仅语义化标记删除和插入内容，不自动计算差异；需用JavaScript（如jsdiff）分析文本差异后，再用二者渲染结果，并注意HTML结构安全与可读性优化。
Del 与 Ins 标签本身不生成差异对比视图，它们只是语义化地表示删除和插入内容。要实现两份文档的动态差异对比，需结合 JavaScript 计算文本差异，再用 <del></del> 和 <ins></ins> 渲染结果。
理解 Del 与 Ins 的语义作用
<del></del> 表示已被移除的内容，<ins></ins> 表示新添加的内容。浏览器默认渲染为带删除线和下划线的文本，但它们不自动识别“哪段被删、哪段被加”——这需要外部逻辑判断。
- 它们是呈现层标记，不是差异算法
- 无障碍支持良好（读屏软件会播报“已删除”“已插入”）
- 样式可自定义，例如用背景色区分：
del { background: #ffebee; }
用 JavaScript 实现基础文本差异计算
对纯文本对比，可使用轻量库如 jsdiff（无依赖、支持字符/行级比对）：
- 加载 jsdiff：
<script src="https://cdn.jsdelivr.net/npm/diff@5.0.0/dist/diff.min.js"></script> - 调用
Diff.createPatch()或Diff.diffChars()获取操作列表 - 遍历差异结果，对
removed: true的片段包裹<del></del>，对added: true的包裹<ins></ins>
示例片段：
const diff = Diff.diffChars(oldText, newText);
const html = diff.map(part => {
if (part.removed) return `<del>${part.value}</del>`;
if (part.added) return `<ins>${part.value}</ins>`;
return part.value;
}).join('');处理 HTML 内容时的注意事项
若原始文档含 HTML 标签（如段落、链接），直接比对字符串易破坏结构。建议：
- 先用
DOMParser解析为 DOM 树，提取纯文本做差异（适合内容为主、格式次要的场景） - 或使用 HTML-aware 差异库（如 htmldiff），它保留标签结构，仅对文本节点做增删标记
- 避免将
<del></del>插入到不允许嵌套的上下文（如<pre class="brush:php;toolbar:false;"></pre>内直接放<del></del>可能影响换行）
增强可读性的实用技巧
仅靠删除线和下划线不够直观，可叠加视觉提示：
- 给
<del></del>加红色半透明背景：del { background: rgba(239, 83, 80, 0.2); text-decoration: line-through; } - 给
<ins></ins>加绿色底色+虚线下划线：ins { background: rgba(76, 175, 80, 0.2); text-decoration: underline dashed #4CAF50; } - 在行首添加图标（用伪元素）：
del::before { content: "➖ "; color: #f44336; } - 提供切换按钮，一键显示/隐藏差异标记（通过 toggle class 控制
del, ins的 visibility）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
