如何提取div元素内的数据并转换为JavaScript数组

结论 #

可以将读取到的new_data转换为数组，具体实现方式取决于App1写入div时的原始data格式，以下是两种常见场景的实现方案：

场景1：App1直接写入原始数组（未做序列化） #

如果App1直接将数组赋值给innerText，数组会默认调用toString()方法转为逗号分隔的字符串，此时可以用split()方法拆分得到数组：

• App1写入代码示例：

// data为原始数组
const data = [1, '前端', 'JavaScript'];
document.getElementById('array').innerText = data;
// 写入后div的文本内容为 "1,前端,JavaScript"

• App2转换代码：

let new_data = document.getElementById('array').innerText;
const resultArr = new_data.split(',');
// 转换后得到 ["1", "前端", "JavaScript"]

注意：该方案仅适用于数组项本身不包含逗号的场景，否则会导致拆分结果错误

场景2：JSON序列化写入（推荐通用方案） #

如果需要支持包含逗号、特殊符号、嵌套结构的数组，建议App1写入时先对数组做JSON序列化，App2读取后再反序列化，可100%还原原始数组结构：

• App1写入代码示例：

const data = [1, '带,逗号的内容', {type: '测试'}, [2,3,4]];
// 先序列化再写入
document.getElementById('array').innerText = JSON.stringify(data);

• App2转换代码：

let new_data = document.getElementById('array').innerText;
const resultArr = JSON.parse(new_data);
// 转换后的数组和原始data结构、内容完全一致

注意：该方案无数组项内容限制，是跨应用传递数组类数据的首选实现

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