使用 jquery 或 javascript 将逗号分隔的键和值字符串转换为对象答案

【问题标题】：Comma Separated Key and Value string to Object using jquery or javascript使用 jquery 或 javascript 将逗号分隔的键和值字符串转换为对象
【发布时间】：2016-04-01 00:06:20
【问题描述】：

我使用 JavaScript 读取 HTML 元素的属性，如下所示：

<table data-option="pageSize:10, pageNumber:1, rowNumber:true"></table>

我会有这样的字符串：

attrs="pageSize:10, pageNumber:1, rowNumber:true";

我有一个像这样的键和值 JavaScript 对象：

obj={pageSize:12, pageNumber:1, rowNumber:true}

我想将我的 attrs 转换为像 obj 这样的对象。

【问题讨论】：

你能修改 HTML 吗？如果你将data-option值的格式改为JSON，jQuery会自动为你解析成一个对象。
不幸的是，它对我没有帮助。

标签： javascript jquery json string object

【解决方案1】：

选项 1。

存储整个 json 编码的字符串。

选项 2。

要将其从字符串转换为带有JSON.parse 的对象，您需要双引号。

使用正则表达式添加双引号from here，我们得到想要的结果：

attrs = ("{" + attrs + "}").replace(/([{,])(\s*)([A-Za-z0-9_\-]+?)\s*:/g,'$1"$3":');
var obj = JSON.parse(attrs);

更新：

正如 epascarello 所提到的，如果你有像name: Jack 这样的不带引号的字符串值，那么这种方法显然会失败。但是，如果您将原始字符串放在那里，请注意它们可能包含逗号或空格或其他任何内容，因此您最好引用它们

【讨论】：

谢谢。选项 2 很棒。
选项二适用于您的情况，如果值是不带引号的字符串，它将失败。
@epascarello 好吧，是的，肯定会的。但是，首先，取消引用字符串值对我来说似乎很奇怪（那么如何处理字符串中的空格或逗号？），毕竟，从问题的陈述中不清楚这些值是否会被引用。 ..

【解决方案2】：

您可以自己迭代和创建对象

var attr = $('table').data('option');
var obj  = {};

$.each(attr.split(','), function(index, item) {
    var parts = $.map(item.split(':'), function(part) {
        part = $.trim(part);
        if ( +part == part ) return +part
        else if ( part === 'true' ) return true
        else if ( part === 'false') return false
        else return part;
    });
    obj[parts[0]] = parts[1];
});

var attr = $('table').data('option');
var obj  = {};

$.each(attr.split(','), function(index, item) {
	var parts = $.map(item.split(':'), function(part) {
    	part = $.trim(part);
    	if ( +part == part ) return +part
        else if ( part === 'true' ) return true
        else if ( part === 'false') return false
        else return part;
	});
    obj[parts[0]] = parts[1];
});

document.body.innerHTML = '<pre>' + JSON.stringify(obj, null, 4) + '</pre>';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table data-option="pageSize:10, pageNumber:1, rowNumber:true"></table>

【讨论】：