data-* 属性中的 encodeURIComponent() 与 JSON.stringify()

Posted 2023-03-05

【中文标题】data-* 属性中的 encodeURIComponent() 与 JSON.stringify()

【英文标题】：encodeURIComponent() vs JSON.stringify() in data-* attribute

【发布时间】：2014-10-10 04:39:07

【问题描述】：

我想使用数组作为 data-* 属性，并且很多 *** 答案建议我应该使用 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-*=""，因为' 或" 都会破坏HTML标记。

我是否遗漏了什么或者encodeURIComponent() 是对这样的数组进行编码的真正解决方案？为什么在其他 *** 答案中没有人注意到这一点？

【问题讨论】：

你想使用 javascript 生成 HTML 代码，或者你为什么要问encodeURIComponent ...？

您可以简单地将属性附加到元素上，包括数组。这将防止解析 html 的复杂性。

不，我只想将一个同时使用" 和' 的值作为data-* 属性的值。

【参考方案1】：

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

虽然encodeURIComponent 会“工作”，因为它转义了所有有问题的字符，但它都会导致过于丑陋的值/标记，并且在使用这些值时需要手动 decodeURIComponent 步骤 - 哎呀！

相反，如果将数据直接插入 HTML，只需“html 编码”值并将结果用作属性值。大多数服务器端语言都有这样的函数，尽管 JavaScript 本身不提供等效函数。

假设属性值被引用，需要用适当的HTML实体替换的有问题的字符是：

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

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

【讨论】：

如果您需要在 <textarea> 中显示 JSON 数据，您可能希望将单引号替换为 \u0027，将双引号替换为 \u0022 而不是 HTML 实体，因为 " 将在<textarea> 中显示原样。

> 只需“html 编码”该值。忽略提供如何做到这一点的示例。

@AlxVallejo 尚未指定生成 JSON 的语言/环境。 "大多数服务器端语言都有这样的功能, ..";其中大部分在搜索时都能找到。

@user2864740 好的，你引用了 encodeURIComponent 这是 JavaScript。那么你会用什么代替呢？

encodeURIComponent 被原帖引用，因此值得特别提及；根据答案，JavaScript 没有定义这样的方法（根据 ECMAScript 规范或 W3C DOM），尽管可以找到许多第三方库之一。同样，取决于上下文。