數據屬性檢索和解析javascript

我是JavaScript編程新手，我堅持數據屬性檢索。數據屬性檢索和解析javascript

以下鏈接是使用jQuery

store and retrieve javascript arrays into and from HTML5 data attributes

的人，我希望做同樣的香草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?

上面的鏈接有助於獲取數據的屬性非常好，但怎麼能過濾數據，自定義字符串或直創建數據的自定義的對象。

如果有人知道一個圖書館要做到這一點，請讓我知道

來源

2014-09-05 Fahim Akhtar

你是說你要支持IE6？ – 2014-09-05 12:57:42

@PaulS .:除了（在我的答案中）使用或不使用'forEach'之外，其他都無關緊要。（雖然現在支持IE6會相當奇怪！但IE8上缺少forEach'）IE6不會被'data-*'屬性困擾（據我所知，沒有瀏覽器）。 – 2014-09-05 13:02:33

我記得'xxx.getAttribute'用於處理IE6中的非標準屬性，但我不知道如何測試一個14歲的過時瀏覽器。 – 2014-09-05 13:06:42

這個特別的例子是相當簡單：它是一個系列名稱：用分號分隔值對。因此，您可以使用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。

來源

2014-09-05 12:55:35

這幾乎是我一直在尋找的東西。真的，它只是我有點無法使其工作。讓我試試更多，我想我將能夠通過..否則將回來。 – 2014-09-05 19:00:36

這裏有幾個快捷功能可以讓您存儲，檢索和任何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]; 
}

然後寫一個陣列到#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

來源

2014-09-05 13:05:55

JSON方法在使用[* JSON.org *]（https://github.com/douglascrockford/JSON-js）的舊版瀏覽器中很容易支持。 – RobG 2014-09-05 13:17:33

數據屬性檢索和解析javascript

回答

相關問題