jQuery：从逗号分隔的选项列表中获取价值

Question

我觉得它很简单，但是在星期一真的很难。 ^^

我有一些这样的HTML（已修复-无法在此处进行任何更改）：

<a class="boxed" href="#foo" rel="type: 'box', image: '/media/images/theimage.jpg', param3: 'title here'">bar</a>

使用var $(this).attr('rel');很容易从rel中获取值$(this).attr('rel'); 但是如何获取此列表中图像或标题的值？ 当然拆分会起作用，但是我认为有更好的方法...

Answer 1

var rel = $('.boxed').attr('rel');
var arr = rel.split(',');
$.each(arr, function() {
    alert(this.split(':').pop());
});

JSFIDDLE演示

Answer 2

有很多方法可以实现，这是一种仅使用正则表达式匹配组的方法。

var str = "type: 'box', image: '/media/images/theimage.jpg', param3: 'title here'";
var re = /\s?([^:]*):\s'([^']*)',?/;
var result;
var prop = {};
while ((result = re.exec(str)) !== null) {
    prop[result[1]] = result[2];
    str = str.replace(re,"");
}
console.log(prop);

使其成为JSON有效字符串并使用解析的另一种方法

var str = "type: 'box', image: '/media/images/theimage.jpg', param3: 'title here'";
var re1 = /(^|,\s)([^:]*)/g;
var re2 = /'/g;
var json = "{" + str.replace(re1,'$1"$2"').replace(re2,'"') + "}";
var prop = JSON.parse(json);
console.log(prop);

Answer 3

拆分在这里工作正常...如果您想要一个关联数组：

var str = "type: 'box', image: '/media/images/theimage.jpg', param3: 'title here'";
var arr = str.split(',');
var answer = {};

for (var i = 0, len = arr.length; i < len; i++) {
    var values = arr[i].split(':');
    answer[values[0].trim()] = values[1].trim();
}

但是@epascarello的正则表达式解决方案比这更好。