使用JavaScript函数更新HTML Table数据时更新失效问题求助

问题原因 #

你代码的核心问题有3个：

• 正则匹配的字段和表格TD的用途完全错位，就算匹配成功内容也和表格表头含义不符
• 没有判断正则匹配结果就直接取数组索引，只要任意一个字段匹配失败，就会抛出JS错误终止后续所有执行逻辑，你遇到的表格不更新90%以上是这个原因导致的
• 部分字段的匹配规则不符合实际邮件头的规范，必然会匹配失败触发报错

1. 对应关系错位问题

你现有代码的匹配赋值逻辑和表格TD的对应关系完全错误：

2. 无匹配判断导致报错的问题

如果输入的邮件头里没有你写的任意一个正则对应的字段，exec() 方法会返回null，此时直接访问[1]会抛出Cannot read properties of null (reading '1')错误，JS运行时遇到未捕获的错误会直接终止所有后续代码执行，所以你能看到表单验证的提示，但是后续表格赋值逻辑完全没跑。

3. 字段匹配规则不符合规范的问题

比如发件人IP不会出现在From字段里，通常存在于X-Originating-IP或者Received字段中；X-Ms-Has-Attach仅微软系邮件服务会加这个头，其他服务商的邮件大概率没有这个字段，必然会匹配失败。

修正后的参考代码 #

function textSubmit() {
  var headers = document.getElementById("headers").value;
  if (headers == "") {
    alert("Please submit email headers before proceeding.");
    return false;
  }
  // 封装匹配函数，匹配失败返回兜底提示
  function getHeader(regex, headerText) {
    const match = regex.exec(headerText);
    return match ? match[1] : "未匹配到对应字段";
  }
  // 修正对应关系
  // td1对应主题，优先匹配Subject，没有再匹配Thread-Topic
  document.getElementById("td1").innerHTML = getHeader(/Subject: (.+)/im, headers) || getHeader(/Thread-Topic: (.+)/im, headers);
  // td2对应发件人地址，匹配From字段
  document.getElementById("td2").innerHTML = getHeader(/From: (.+)/im, headers);
  // td3对应发件人IP，匹配X-Originating-IP字段，你也可以根据你的邮件头规则调整正则
  document.getElementById("td3").innerHTML = getHeader(/X-Originating-IP: (.+)/im, headers);
  // td4对应发送时间，匹配Date字段
  document.getElementById("td4").innerHTML = getHeader(/Date: (.+)/im, headers);
  // td5对应是否有附件，兼容多场景
  const attachFlag = getHeader(/X-Ms-Has-Attach: (.+)/im, headers);
  document.getElementById("td5").innerHTML = attachFlag !== "未匹配到对应字段" ? attachFlag : getHeader(/Content-Disposition: attachment/im, headers) ? "是" : "否";
}

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