如何使用JavaScript或jQuery从HTML data属性获取并设置数组？

原生JavaScript实现 #

1. 先获取目标DOM元素
2. 通过dataset属性读取data-array的字符串值
3. 使用split()方法将字符串按分隔符分割为数组（注意处理元素间的空格）

完整代码示例：

<div data-array="Apple, Banana, Jam, Strawberry, Peanut"></div>

<script>
// 获取目标元素
const targetDiv = document.querySelector('div[data-array]');
// 读取data属性值并分割为数组
const fruits = targetDiv.dataset.array.split(', ');

// 验证结果
console.log(fruits); // 输出: ["Apple", "Banana", "Jam", "Strawberry", "Peanut"]
</script>

如果数据的分隔符不固定（比如存在仅用逗号分隔、无空格的情况），可以用正则表达式兼容多种格式：

const fruits = targetDiv.dataset.array.split(/,\s*/);

jQuery实现 #

需要先引入jQuery库，之后可以通过.data()或.attr()方法获取data属性值，再分割为数组：

完整代码示例：

<div data-array="Apple, Banana, Jam, Strawberry, Peanut"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 使用.data()读取属性值并分割
const fruits = $('div[data-array]').data('array').split(', ');

// 或者用.attr()直接读取字符串
// const fruits = $('div[data-array]').attr('data-array').split(', ');

// 验证结果
console.log(fruits); // 输出: ["Apple", "Banana", "Jam", "Strawberry", "Peanut"]
</script>

内容的提问来源于stack exchange，提问作者Asma Binta Younus