javascript 从单个 HTML5“data-”属性创建一个数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22113770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create an Array from a single HTML5 "data-" attribute
提问by Phoenix
I have this HTML:
我有这个 HTML：
<section id="SSID" data-texts="'Text1', 'Text2', 'Text3'"></section>
I want to create an Array variable in jQuery and my jQuery code is:
我想在 jQuery 中创建一个数组变量，我的 jQuery 代码是：
$(document).ready(function() {
var Selection = $("#SSID").data("texts");
var Texts = [ Selection ];
console.log(Texts.length);
});
For my example, the result I expect is:
对于我的示例，我期望的结果是：
Texts[0] = 'Text1'
Texts[1] = 'Text2'
Texts[2] = 'Text3'
...and that the length of the array Textsis 3.
...数组的长度Texts是3。
However, what I am seeing is that the length of Textsis 1and that the entire string is being loaded into Texts[0]:
但是，我看到的是 的长度Texts为1并且整个字符串正在加载到Texts[0]：
Texts[0] = "'Text1', 'Text2', 'Text3'"
I think my problem is being caused by the "(quotation mark) characters. How can overcome this problem and achieve my objective?
我认为我的问题是由"（引号）字符引起的。如何克服这个问题并实现我的目标？
采纳答案by Pranav C Balan
You can use JSON.parse()
您可以使用 JSON.parse()
HTML :
HTML :
<section id="SSID" data-texts='"Text1", "Text2", "Text3"'></section>
JQUERY :
查询：
var Selection = JSON.parse('[' + $("#SSID").data("texts") + ']');
or
或者
HTML :
HTML :
<section id="SSID" data-texts='"Text1", "Text2", "Text3"'></section>
JQUERY :
查询：
var Selection = JSON.parse($("#SSID").data("texts"));
FYI :But it would be better to store the actual JSON as the data attribute value. For eg : data-texts='["Text1", "Text2", "Text3"]'and parse it directly.
仅供参考：但最好将实际的 JSON 存储为数据属性值。例如：data-texts='["Text1", "Text2", "Text3"]'并直接解析它。
UPDATE :Or you can do it using Array#mapmethod and String#splitmethod.
更新：或者您可以使用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>回答by Tomalak
data-attributes can contain JSON.
data-属性可以包含 JSON。
jQuery will automatically parse them for you, if they are syntactically valid.
如果它们在语法上有效，jQuery 将自动为您解析它们。
<section id="SSID" data-texts='["Text1", "Text2", "Text3"]'></section>
and
和
$(function() {
var texts = $("#SSID").data("texts");
console.log(texts.length); // logs "3"
});
See: http://jsfiddle.net/5mtre/
Security hint: You must encode the JSON correctly on the server.
安全提示：您必须在服务器上正确编码 JSON。
This means that you need to do JSON encoding andHTML encoding, here shown examplary using PHP:
这意味着您需要进行 JSON 编码和HTML 编码，此处显示了使用 PHP 的示例：
<section id="SSID" data-texts="<?=htmlspecialchars(json_encode($data), ENT_QUOTES, 'UTF-8')?>"></section>
