Question

我正在尝试一些事情......

说我有这个：

<div id="helloworld" 
     call="chart" 
     width="350" height="200" 
     value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" 
     label="['test1', 'test2', 'test3', 'test4', 'test5']"/>

我正在使用jQuery将我的所有元素属性提取到一个对象数组中，该部分有效，我得到的结果如下：

Object { id="helloworld", call="chart" ... }

我需要做的第二部分是转换数组的＆＃34;字符串表示＆＃34;进入一个实际的数组，它适用于我的值使用JASON.parse（）作为值...但是尝试用标签做同样的事情并没有＆＃39;工作，它不喜欢我在那里的单引号（＆＃39;）尝试用\＆＃34;仍然没有骰子。

有没有人知道将它转换回数组的优雅方式？

Answer 1

当您使用jQuery和自定义属性时，首先要修复的是属性：

而不是：

<div id="helloworld" 
     call="chart" 
     width="350" height="200" 
     value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" 
     label="['test1', 'test2', 'test3', 'test4', 'test5']" />

您应该使用：

<div id="helloworld" 
     data-call="chart" 
     width="350" height="200" 
     data-value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" 
     data-label='["test1", "test2", "test3", "test4", "test5"]'></div>

请务必对您的数据使用有效的JSON编码。

执行此操作时，您可以使用jQuery's .data() method

访问属性的值

$('#helloworld').data('label'); //returns the actual array

In some cases you may want to use .attr() to access the string representation of the attribute.

如果您绝对必须保留数据，并且可以保证“字符串”不包含特殊字符，则可以调用$.parseJSON($('#helloworld').attr('data-label').replace("'", '"'));，但将失败如果字符串包含引号或其他未正确编码/转义的特殊字符。

Answer 2

由于您的字符串看起来像是JSON，因此您使用JSON.parse。 JSON不允许'，因此您无法解析标签。

您是否有可能更改HTML的生成方式？如果使用正确的HTML编码生成它，则可以轻松地将其解析为JSON。

<div label="[&quot;test1&quot;, &quot;test2&quot;, &quot;test3&quot;, &quot;test4&quot;, &quot;test5&quot;]">

JSON.parse(elm.label); // should work

Answer 3

如果您可以控制代码的生成方式 - 请尝试切换小数，因此单个小数将围绕标签属性：

label='["test1", ..., "test5"]'

但正如zzzzBov建议的那样，将自定义属性转换为data- *属性将是我要采取的第一步。看一下这篇小文章 - http://www.broken-links.com/2010/11/18/data-attributes-in-html-and-jquery/。

Answer 4

由于它不是有效的JSON，因此一个选项是：

arr = x.replace(/[\[\]']/g, '').replace(/\,\s/g, ',').split(',');

其中x为"['test1', 'test2', 'test3', 'test4', 'test5']"

上面会给你一个数组：

["test1", "test2", "test3", "test4", "test5"]

Answer 5

另一种方法是使用javascript的eval()功能。它会将字符串转换为js变量。

var arr = eval($('#helloworld').attr('label'));

jsFiddle

Answer 6

好的，最后的解决方案，结合我在网上找到的东西以及@Vega和@adeneo的答案，我们在这里......

使用以下jQuery方法可以通过调用blank attr（）来获取所有内容：

(function($) {
    var _old = $.fn.attr;
    $.fn.attr = function() {
        if (this[0] && arguments.length === 0) {
            var map = {};
            var i = this[0].attributes.length;
            while (i--) {
                map[this[0].attributes[i].name.toLowerCase()] = this[0].attributes[i].value;
            }
            return map;
        } else {
            return _old.apply(this, arguments);
        }
    }
}(jQuery));

我可以获取所有这些属性：

var data = $(document.getElementById(id)).attr();

有了这个，我保持我的元素属性完全按照之前的方式（使用HTML5调整）：

<div id="helloworld"
     data-call="chart"
     data-width="350"
     data-height="200"
     data-stacked="true"
     data-value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" 
     data-label="['test1', 'test2', 'test3', 'test4', 'test5']"/>

然后我使用JSON.parse（）来处理数据值，然后使用@ adeneo的方法来处理字符串数组。

    data.value = JSON.parse(data.value);
    data.label = data.label.split(',').map(function(val) { return val.trim().replace(/(\'|\[|\])/g,''); });

对于我自己的其他js代码的目的，我只是从键中删除数据 - 现在一切都是犹太人的！

for (key in data) {
    var newKey = key.replace("data-","");
    if (newKey != key) {
        data[newKey] = data[key];
        delete data[key];
    }
}

现在我可以将数据传递给我现有的函数!!!! ：）

我以前如何调用我的函数：

var data = {
    id: 'helloworld',
    width: 350,
    height: 200,
    value: [
        [4, 8, 1, 88, 21],
        [45, 2, 67, 11, 9],
        [33, 4, 63, 4, 1]
    ],
    stacked: true,
    label: ["test1", "test2", "test3", "test4", "test5"]
};
chart(data);

现在我可以使用jQuery，找到具有特定类名的所有元素，然后只需解析属性即可触发调用。：）

如何将数组的字符串表示形式转换回数组？

6 个答案: