encodeURIComponent（）vs data- *属性中的JSON.stringify（）

Question

我想将数组用作data-*属性，并且很多StackOverflow答案都表明我应该使用JSON.stringify();

• How to pass an array into jQuery .data() attribute
• Store and use an array using the HTML data tag and jQuery
• https://gist.github.com/charliepark/4266921
• 等

所以，如果我有这个数组：['something', 'some\'thing', 'some"thing']它将被解析为"["something","some'thing","some\"thing"]"，因此它既不适合data-*=''也不适合data-*=""，因为{ {1}}或'会破坏HTML代码。

我是否遗漏了某些内容，或者"是对这类数组编码的真正解决方案？为什么在其他StackOverflow答案中没有人注意到这一点？

Answer 1

当文本是HTML标记本身的一部分时，JSON.stringify 的原因保证在HTML属性中是安全的。但是，如果使用其中一种访问方法（例如.data或.attr）来分配值，则不存在转义问题，因为这些方法不直接操作原始HTML文本。

虽然encodeURIComponent ＆＃34;工作＆＃34;因为它会逃避所有有问题的字符，它会导致过于丑陋的值/标记，并且在使用值时需要手动decodeURIComponent步骤 - 哎呀！

相反，如果将数据直接插入HTML，只需＆＃34; html编码＆＃34;值并将结果用作属性值。这种功能随大多数服务器端语言一起提供，尽管JavaScript本身不提供等效的功能。

假设引用属性值，需要替换为相应HTML实体的有问题字符为：

• & - &，escape-the-escape，先申请
• " - "，用于双引号属性
• ' - '，适用于单引号属性
• 可选（XML必需）：<和>

使用上述方法依赖于 HTML标记的解析，以及其中HTML实体的自动解码，使得实际（非编码）结果为存储为DOM中的数据属性值。