如何捕获contentEditable属性div内元素编辑前后的状态变化？

首先得指出你当前代码的核心问题：你保存的是DOM元素的引用，而不是初始状态的副本。

当你执行before_html = $("#example_div").children()时，这个jQuery对象里存的是对页面上真实DOM节点的引用。当用户编辑contentEditable的div时，这些DOM节点的内容会被直接修改——所以你点击按钮时，before_html[0].innerText其实已经是修改后的内容了，和after_html[0].innerText完全一致，自然看不到任何差异。

正确实现思路 #

要捕获元素状态变化，你需要在页面加载时保存初始状态的快照（副本），而不是DOM引用。之后在需要检查变化时，拿当前状态和这个快照对比即可。

完整可运行代码示例 #

下面是修复后的完整代码，包含contentEditable属性、初始状态保存和差异对比逻辑：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 必须添加contentEditable="true"才能让用户编辑 -->
<div id="example_div" contentEditable="true">
  <p>初始段落1</p>
  <p>初始段落2</p>
</div>
<button id="differences_button">检查编辑变化</button>

<script>
$(function() {
  // 页面加载完成后，保存初始状态的快照
  const initialHtml = $('#example_div').html();
  // 保存每个直接子元素的文本（去空格，避免无关空格干扰对比）
  const initialChildTexts = $('#example_div').children().map(function() {
    return this.innerText.trim();
  }).get();

  $('#differences_button').on('click', function() {
    // 获取当前状态
    const currentHtml = $('#example_div').html();
    const currentChildTexts = $('#example_div').children().map(function() {
      return this.innerText.trim();
    }).get();

    // 对比整体HTML变化
    console.log('=== 整体HTML对比 ===');
    console.log('初始HTML:', initialHtml);
    console.log('当前HTML:', currentHtml);
    console.log('是否有修改:', initialHtml !== currentHtml);

    // 对比每个子元素的文本变化（包含新增/删除元素的情况）
    console.log('\n=== 子元素文本对比 ===');
    const maxCount = Math.max(initialChildTexts.length, currentChildTexts.length);
    for (let i = 0; i < maxCount; i++) {
      const initialText = initialChildTexts[i] || '[该元素已被删除]';
      const currentText = currentChildTexts[i] || '[新增了该元素]';
      
      if (initialText !== currentText) {
        console.log(`第${i+1}个元素: *初始* "${initialText}" → *当前* "${currentText}"`);
      } else {
        console.log(`第${i+1}个元素: 无变化 → "${initialText}"`);
      }
    }
  });
});
</script>

额外优化建议 #

1. 实时监听变化：如果不需要点击按钮，而是要实时捕获编辑变化，可以用input事件（contentEditable元素支持该事件）：

$('#example_div').on('input', function() {
  // 在这里实时对比当前状态和初始快照
  const currentHtml = $(this).html();
  console.log('实时变化:', initialHtml !== currentHtml);
});

2. 处理复杂DOM变化：如果你的div里有嵌套元素、样式变化或者元素增删，手动对比可能不够灵活。可以考虑使用专门的DOM差异库（比如DiffDOM）来生成详细的变化日志，不过这类库需要你自行引入使用。

3. 避免无关干扰：对比时记得用trim()去掉文本前后的空格，避免用户不小心输入的空格被误判为修改。

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