读取CSV生成DOM后JSON键自动附带\r字符的问题求解

问题成因 #

• Windows系统生成的文本文件默认换行符为\r\n（回车+换行），你当前仅用\n分割CSV文件内容，导致拆分后的每一行末尾残留了不可见的\r控制字符
• 回车符在普通字符串打印时不会显性展示，因此你之前打印模块名时未发现异常，但该字符实际存在于字符串中，会随着赋值被带入元素id、JSON键中，最终出现你观测到的问题。

解决方案 #

推荐从CSV读取的源头处理，彻底避免残留控制字符：

方案1：优化CSV拆分逻辑 #

修改文件读取后的拆分代码，兼容两种操作系统的换行符，同时过滤空行：

if (!this.files || !this.files[0]) return;
const FR = new FileReader();
FR.addEventListener("load", (evt) => {
  // 替换原有拆分逻辑，兼容\r\n和\n两种换行，同时清洗每行内容、过滤空行
  const x = evt.target.result.split(/\r?\n/)
    .map(line => line.replace(/\r$/, '').trim())
    .filter(line => line.length > 0);
  console.log(x+","+x.length);
  var top=180;
  var left=0;
  for(i in x){
    append_module_name_to_drag_div(x[i],top,left);
  }
}
FR.readAsText(this.files[0],"ISO-8859-3");

该方案可直接替代原有代码，无需再单独调用splice删除最后一行空内容。

方案2：在生成JSON时清洗键名 #

如果不想改动上游读取、生成元素的逻辑，可以在组装JSON对象时对键名做清洗：

var jsonData = {};
var childDivs = document.querySelector('#markers').children;
for( i=0; i< childDivs.length; i++ ){
  if(childDivs[i].tagName==="DIV" && childDivs[i].children[0].children[0].className==="level0"){
    // 对取到的id做回车符移除和空白修剪
    var module_name_=childDivs[i].id.replace(/\r/g, '').trim();
    console.log(module_name_+"..")

    var coordinates =return_coordinates_of_module(module_name_);
    
    jsonData[module_name_]=[coordinates[0],coordinates[1]];

    }
}
console.log(jsonData);

内容的提问来源于stack exchange，提问作者ab.fe