数据属性检索和解析javascript

我是javascript编程新手，我一直在进行数据属性检索

下面的链接对于使用jQuery的人来说有点有用

我想对香草js也这么做。在自定义数据属性的帮助下，我想创建对象和数组

<div id="getAnimation"
data-r="564"
data-c="96" 
data-custom="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75; skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-s="700"
data-st="1400"
</div>

---

这个特定的例子非常简单：它是一系列用分号分隔的名称：值对。因此，您可以使用
split
获取对数组，然后再次使用
split
获取名称和有效分隔符。如果要使用这些名称和值在对象上创建属性，可以使用括号表示法：

// Get the value
var val = theElement.getAttribute("data-custom");

// Split it into fields on `;` (with optional whitespace on either side)
var fields = val.split(/\s*;\s*/);

// Create a blank object
var obj = {};

// Loop through the fields, creating object properties:
fields.forEach(function(field) {
    // Split the field on :, again with optional whitespace either side
    var parts = field.split(/\s*:\s*/);

    // Create a property on the object using the name, and assigning the value
    obj[parts[0]] = parts[1];
});

我在那里使用了
String#split
，给它一个正则表达式，告诉它在哪里拆分字符串

在结果对象中，仅使用上面的代码，属性值都将是字符串。例如，
obj.scaleX
将是字符串
“0.75”
。如果需要将其作为数字，可以通过以下几种方式之一将其转换为数字：


parseFloat
，它将转换尽可能多的字符，但忽略尾随字符。因此
parseFloat（“0.75foo”）
是
0.75
，而不是错误

Number
，它不会像
parseFloat
，
Number（“0.75foo”）
是
NaN
，而不是
0.75

应用任何数学运算符，一元数
+
都是常见的：
+“0.75”
是
0.75


因此，我们可以检查这些值是否看起来像数字，而不仅仅是将其作为字符串抓取，如果是，则进行转换：

// Loop through the fields, creating object properties:
fields.forEach(function(field) {
    // Split the field on :, again with optional whitespace either side
    var parts = field.split(/\s*:\s*/);

    // Does the value look like a number?
    if (/(?:^\d+$)|(?:^\d+\.\d+$)/.test(parts[1])) {
        // Yes
        obj[parts[0]] = +parts[1];
    }
    else {
        // No
        obj[parts[0]] = parts[1];
    }
});

它假定
作为十进制分隔符，并假定不存在千位分隔符


旁注：上面我使用了
Array#forEach
，这是旧浏览器上不存在的ES5功能<不过，代码>forEach

可以在较旧的浏览器上“填充”。您可以看到各种各样的数组循环方式。

这里有几个快速函数，可以让您将任何支持JSON的数据存储、检索和删除到数据属性中

function setData(node, data_name, data_value) {
    node.dataset[data_name] = JSON.stringify(data_value);
}

function getData(node, data_name) {
    return JSON.parse(node.dataset[data_name]);
}

function delData(node, data_name) {
    return delete node.dataset[data_name];
}

然后在data fizz中为#getAnimation写入一个数组

---

需要IE 11+，因为我使用，如果您将其更改为方法

node.setAttribute

，

node.getAttribute

和

node.removeAttribute

，那么需求将下降到IE 8+，因为使用或不使用

forEach

。（虽然现在支持IE6会很奇怪！但是IE8上也缺少了

forEach

。）IE6不受

data-*

属性的困扰（据我所知，没有浏览器）。我记得

xxx.getAttribute

用于处理IE6中的非标准属性，但是我不知道如何测试一个已经过时14年的浏览器。@sebcap26：它确实有效，几年前我在一个需要IE6（！）支持的项目上使用了

data-*

属性。（我为这些事情保留了一台Windows2000虚拟机，尽管我已经很久不需要它了，因为IE6最终真的死了。）为什么不把JSON放在数据属性中呢？从OP创建的对象或数组是什么样子的？为什么这些数据存储在一个元素中而不是数据对象中？JSON方法在使用中的东西的旧浏览器中很容易得到支持。这几乎就是我想要的。真的，只是我有点无法让它工作。让我再试一次，我想我会通过的。。其他人会回来的。

// variables to use
var elm = document.getElementById('getAnimation'),
    foo = [1, 2, 3, 'a', 'b', 'c'];
// store it
setData(elm, 'fizz', foo);
// retrieve it
var bar = getData(elm, 'fizz');
// look what we have
console.log(bar); // [1, 2, 3, "a", "b", "c"]