从单个HTML5“data-”属性创建一个数组

Question

我有这个HTML：

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

我想在jQuery中创建一个Array变量，我的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的长度为3 。

但是，我看到的是Texts的长度是1 ，整个字符串被加载到Texts[0] ：

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

我认为我的问题是由" （引号）字符引起的。如何克服这个问题并实现我的目标？

Answer 1

data- attributes可以包含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>

Answer 2

你可以使用JSON.parse()

HTML：

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

JQUERY：

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

小提琴演示

要么

HTML：

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

JQUERY：

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

---

仅供参考：但最好将实际的JSON存储为数据属性值。 例如： data-texts='["Text1", "Text2", "Text3"]'并直接解析它。

---

更新：或者您可以使用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>