在 html 上添加 json 数据（数据包含多种特殊字符），使用 JSON.stringify 读取 error

let jsonObj = [{
	"Name": "test"
	"Attach": "www!@#$%^&*(){}|:\"<>?,./;'[]\\"
}]

let html = jsonObj.map((i, v) => {
	let jsonStr = JSON.stringify(jsonObj)
	return `<tr data='${jsonStr}'>
			<td>${v['Name']}</td>
			<td>${v['Attach']}</td>
		</tr>`
})

$('#demo').html(html)

const firstTrData = $('#demo').find('tr:first').attr('data')
console.log(firstData) // 打印的 json 数据也不对

let rawJsonData = JSON.parse(firstTrData) // error

里面包含多个特殊字符，再用 JSON.parse 解析出对象，发现 error：

直接说原因，主要看 data='${jsonStr}' 这个地方，使用的是单引号'，但是特殊字符里也包含了单引号'

解决办法：
在 JSON.stringify 添加第二个参数来 html编码 一下单引号字符，这样即使在取出json字符串的时候，浏览器也会帮你转换为原来的字符。

let jsonStr = JSON.stringify(jsonObj, function (k, v) {
	if (k === 'Attach')
		return v?.replace("'", "'") // html 编码
	return v;
})