JavaScript读取CSV到SVG脚本时nodeStyle字段解析问题求助

核心问题很明确：CSV里的nodeStyle值是字符串格式（比如"{width:100, height:100}"），而你的SVG脚本需要的是JavaScript对象，直接用字符串当然会失效。下面给你几种可行的解决办法：

方法1：修复字符串格式后用JSON.parse解析 #

CSV里的样式字符串不符合标准JSON格式（JSON要求键必须用双引号包裹），所以先把字符串转换成标准JSON格式，再用JSON.parse()转成对象：

// 假设你用PapaParse这类库读取CSV，拿到每行数据row
// 处理nodeStyle字符串：把无引号的键替换成带双引号的键
const formattedStyleStr = row.nodeStyle.replace(/([a-zA-Z_][a-zA-Z0-9_]*):/g, '"$1":');
// 解析成JS对象
row.nodeStyle = JSON.parse(formattedStyleStr);

这个正则会把width:100变成"width":100，让字符串符合JSON规范，就能正常解析了。

方法2：修改CSV为标准JSON格式（推荐） #

如果能修改CSV文件，直接把nodeStyle列的内容改成标准JSON格式，比如：

id,nodeStyle
1,"{""width"":100,""height"":100}"
2,"{""width"":80,""height"":80,""fill"":""red""}"

注意CSV里的双引号需要用两个双引号转义，这样读取后直接用JSON.parse(row.nodeStyle)就能得到对象，不需要额外处理。

方法3：手动解析字符串为对象 #

如果不想用正则或JSON.parse，也可以手动拆分字符串来构建对象：

const styleStr = row.nodeStyle.replace(/[{}]/g, ''); // 去掉首尾的大括号
const styleEntries = styleStr.split(',').map(item => item.trim()); // 分割成键值对数组
const nodeStyle = {};

styleEntries.forEach(entry => {
  const [key, value] = entry.split(':').map(item => item.trim());
  // 数字类型转成Number，否则保留字符串
  nodeStyle[key] = isNaN(Number(value)) ? value : Number(value);
});

row.nodeStyle = nodeStyle;

注意事项 #

• 如果nodeStyle里包含字符串值（比如fill:"red"），CSV里要确保这些值被正确包裹，避免逗号等符号干扰解析；
• 用CSV解析库（比如PapaParse）时，确保开启了正确的引号处理配置，避免字符串被错误拆分。

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