数据属性检索和解析javascript

Question

我是 javascript 编程的新手，我被数据属性检索困住了。

以下链接对使用 jQuery 的人有点用处

store and retrieve javascript arrays into and from HTML5 data attributes

我想对 vanilla 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>

Do HTML5 custom data attributes “work” in IE 6?

上面的链接有助于很好地获取数据属性，但是如何在 data-custom 中过滤字符串或直接创建 data-custom 的对象。

如果有人知道图书馆可以做到这一点，请告诉我

Answer 1

这里有几个快速函数可以让你存储、检索和删除任何 JSON-able 数据到数据属性

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

中写一个Array到#getAnimation

// 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"] 

需要IE 11+，因为我使用node.dataset，如果您将其更改为使用的方法node.setAttribute、node.getAttribute 和node.removeAttribute，则要求降至IE 8+ 因为JSON.stringify 和JSON.parse

Answer 2

这个特定的例子非常简单：它是一系列用分号分隔的名称：值对。因此，您可以使用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 可以在旧版浏览器上“填充”。你可以看到各种遍历数组的方式in this answer here on SO。