如何判断div内容一致性？解决表单重复重绘丢失输入问题

我懂你现在的头疼点：定时器里的loadView不管表单结构有没有真的变化，只要用户输入了内容就会触发重绘，导致输入全丢。这问题根源很简单——你直接拿包含用户输入的当前HTML和服务器返回的原始空白表单HTML做比较，用户输入后selector.html()里的input值已经变了，自然和空值的response不一样，每次都会误判成“内容不同”。

下面是修复后的完整方案，核心思路是只比较表单的静态结构（完全忽略用户输入），只有当结构真的改变时才更新视图，并且更新后自动恢复用户的输入内容：

第一步：添加静态HTML处理的辅助函数 #

这个函数会克隆现有表单元素，清除所有用户输入的动态值，还原到表单的初始静态状态，这样我们就能拿到和服务器返回一致的结构进行公平比较：

function getStaticHtml($element) {
  // 克隆元素，避免修改原页面的DOM
  const $clone = $element.clone();
  
  // 重置所有表单控件到默认状态
  // 处理input控件（文本、复选框、单选框）
  $clone.find('input').each(function() {
    this.value = this.defaultValue;
    if (this.type === 'checkbox' || this.type === 'radio') {
      this.checked = this.defaultChecked;
    }
  });
  
  // 处理textarea
  $clone.find('textarea').each(function() {
    this.value = this.defaultValue;
  });
  
  // 处理select下拉框
  $clone.find('select').each(function() {
    Array.from(this.options).forEach(option => {
      option.selected = option.defaultSelected;
    });
  });
  
  return $clone.html();
}

// 辅助函数：统一HTML格式，消除空格、换行导致的误判
function normalizeHtml(html) {
  return html.replace(/\s+/g, '').trim();
}

第二步：修改loadView方法 #

更新后的方法会先对比静态结构，只有结构变化时才更新视图，并且提前保存用户输入，更新完成后自动恢复：

loadView : function (name, selector = $("#content")) { 
    let url = 'v/' + name + '.html'; 
    $.get(url, function (response) { 
        // 获取当前元素的静态HTML（清除用户输入后）
        const currentStaticHtml = getStaticHtml(selector);
        // 把服务器返回的内容转为jQuery对象，提取静态HTML
        const $newContent = $(response);
        const newStaticHtml = $newContent.html();
        
        // 统一格式后比较，确认表单结构是否真的变化
        if(normalizeHtml(newStaticHtml) !== normalizeHtml(currentStaticHtml)) { 
            console.log("表单结构已更新，开始重绘视图"); 
            
            // 1. 先保存用户当前的所有输入
            const userInputs = {};
            selector.find(':input').each(function() {
              const identifier = this.id || this.name;
              if (identifier) {
                if (this.type === 'checkbox' || this.type === 'radio') {
                  userInputs[identifier] = this.checked;
                } else {
                  userInputs[identifier] = this.value;
                }
              }
            });
            
            // 2. 更新视图
            selector.html(response);
            
            // 3. 恢复用户之前的输入
            selector.find(':input').each(function() {
              const identifier = this.id || this.name;
              if (identifier in userInputs) {
                if (this.type === 'checkbox' || this.type === 'radio') {
                  this.checked = userInputs[identifier];
                } else {
                  this.value = userInputs[identifier];
                }
              }
            });
        } else {
            console.log("表单结构无变化，跳过重绘");
        }
    }); 
}

为什么这个方案能解决问题？ #

1. 精准的结构对比：通过getStaticHtml把当前表单还原到初始状态，再和服务器返回的原始HTML比较，确保只有表单结构（比如新增输入框、按钮文本修改、控件类型变更）改变时才触发重绘。
2. 完全保留用户输入：更新视图前先保存用户的所有输入内容，更新完成后再把这些值填回新的表单控件中，用户完全感知不到输入丢失。
3. 避免格式误判：normalizeHtml函数消除了HTML中的空格、换行、缩进差异，不会因为代码格式不同就误判为结构变化。

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