一个html属性(Javascript对象)如何以安全的方式转换为Javascript/Jquery中的数组?<

Question

我有下一个包含javascript对象的HTML元素:

<div ui-jq="easyPieChart"
ui-options="{
percent: 75,
lineWidth: 5,
trackColor: '#e8eff0',
barColor: '#23b7e5',
scaleColor: false,
color: '#3a3f51',
size: 134,
lineCap: 'butt',
rotate: -90,
animate: 1000
}"
class="easyPieChart">
</div>

如何将此字符串转换为数组，如而不改变HTML:

[{
animate: 1000,
barColor: "#23b7e5",
color: "#3a3f51",
lineCap: "butt",
lineWidth: 5,
percent: 75,
rotate: -90,
scaleColor: false,
size: 134,
trackColor: "#e8eff0"
}]

我已经试过这些版本了:

$("[ui-jq]").each(function () {
var self = $(this);
// var options = eval('[' + self.attr('ui-options') + ']');
var options = (new Function("return [" + self.attr('ui-options') + "];")());
console.log(options);
});

但是我收到一个关于CSP的错误:

Content Security Policy of your site blocks the use of 'eval' in JavaScript
The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unauthorized code on your site.
To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

我创建了一个this JSFiddle来帮助你更快地展示一个例子:https://jsfiddle.net/oqwc1j58/4/

谢谢

Answer 1

如果您将属性设置为data-属性，并且将值设置为正确的JSON，那么jQuery将为您完成:

$("[ui-jq]").each(function () {
var self = $(this);
var options = self.data("uiOptions");

console.log(options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ui-jq="easyPieChart"
data-ui-options='{
"percent": 75,
"lineWidth": 5,
"trackColor": "#e8eff0",
"barColor": "#23b7e5",
"scaleColor": false,
"color": "#3a3f51",
"size": 134,
"lineCap": "butt",
"rotate": -90,
"animate": 1000
}'
class="easyPieChart">
</div>

当jQuery看到data-属性值可以解析为有效的JSON时，它会隐式地这样做，并在通过.data()加载时返回结果值。请注意，应该使用名称的驼峰大小写版本(我认为)，但jQuery可以与任何一个版本一起工作。还要注意的是，省略了"数据"。前缀。

Answer 2

您可以使用JSON.parse():

const opts=$("[ui-jq]").get().map(el=>Object.fromEntries(Object.entries(JSON.parse(el.getAttribute('ui-options').replaceAll("'",'"').replace(/(w+)(?=s*:)/g,'"$1"'))).sort(([a],[b])=>a.localeCompare(b))));
console.log(opts);

<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<div ui-jq="easyPieChart"
ui-options="{
percent: 75,
lineWidth: 5,
trackColor: '#e8eff0',
barColor: '#23b7e5',
scaleColor: false,
color: '#3a3f51',
size: 134,
lineCap: 'butt',
rotate: -90,
animate: 1000
}"
class="easyPieChart">
</div>

Answer 3

这有点麻烦但你可以自己解析HTML并创建你想要的数组:

// From https://stackoverflow.com/a/72773057/378779
const sortObjectByKeys = (object, asc = true) => Object.fromEntries(
Object.entries(object).sort(([k1], [k2]) => k1 < k2 ^ !asc ? -1 : 1),
)
$("[ui-jq]").each(function () {
let options = $(this).attr('ui-options').replace('{', '').replace('}', '').split('n')
let o = {}
options.filter(function(option) { return ! option.match(/^s*$/) }).forEach(function(option){
option = option.trim().replace(/,$/, '')
let a = option.split(/: /)
o[a[0]] = a[1].replace("'", '')
})
console.log(sortObjectByKeys(o))
});
</script>

<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<div ui-jq="easyPieChart"
ui-options="{
percent: 75,
lineWidth: 5,
trackColor: '#e8eff0',
barColor: '#23b7e5',
scaleColor: false,
color: '#3a3f51',
size: 134,
lineCap: 'butt',
rotate: -90,
animate: 1000
}"
class="easyPieChart">
</div>