創建從一個單一的HTML5「數據 - 」屬性的陣列

Question

我有這樣的HTML：

<section id="SSID" data-texts="'Text1', 'Text2', 'Text3'"></section> 

我想創建一個jQuery的數組變量和我的jQuery代碼是：

$(document).ready(function() { 
    var Selection = $("#SSID").data("texts"); 
    var Texts = [ Selection ]; 

    console.log(Texts.length); 
}); 

對於我的榜樣，我希望得到的結果是：

Texts[0] = 'Text1' 
Texts[1] = 'Text2' 
Texts[2] = 'Text3' 

同時，該陣列Texts的長度爲。

然而，我所看到的是，Texts長度爲，並且整個字符串被加載到Texts[0]：

Texts[0] = "'Text1', 'Text2', 'Text3'" 

我想我的問題是由"引起（報價標記）字符。如何克服這個問題並實現我的目標？

Answer 1

您可以使用JSON.parse()

HTML：

<section id="SSID" data-texts='"Text1", "Text2", "Text3"'></section> 

JQUERY：

var Selection = JSON.parse('[' + $("#SSID").data("texts") + ']'); 

Fiddle Demo

或

HTML：

<section id="SSID" data-texts='"Text1", "Text2", "Text3"'></section> 

JQUERY：

var Selection = JSON.parse($("#SSID").data("texts")); 

---

FYI：但它會更好將實際的JSON存儲爲數據屬性值。例如：data-texts='["Text1", "Text2", "Text3"]'並直接解析。

---

UPDATE：，也可以使用Array#map方法和String#split方法做到這一點。

var Selection = $("#SSID").data("texts").split(',').map(JSON.parse); 
 

 
console.log(Selection);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section id="SSID" data-texts='"Text1", "Text2", "Text3"'></section>

Answer 2

data-屬性可以包含JSON。

如果它們在語法上有效，jQuery會自動爲你解析它們。

<section id="SSID" data-texts='["Text1", "Text2", "Text3"]'></section> 

和

$(function() { 
    var texts = $("#SSID").data("texts"); 

    console.log(texts.length); // logs "3" 
}); 

參見：http://jsfiddle.net/5mtre/

---

安全提示：必須正確編碼的JSON在服務器上。

這意味着，你需要做的JSON編碼和 HTML編碼，這裏使用PHP所示實施例一：

<section id="SSID" data-texts="<?=htmlspecialchars(json_encode($data), ENT_QUOTES, 'UTF-8')?>"></section>