关键词：
【中文标题】data-* 属性中的 encodeURIComponent() 与 JSON.stringify()【英文标题】：encodeURIComponent() vs JSON.stringify() in data-* attribute 【发布时间】：2014-10-10 04:39:07 【问题描述】：我想使用数组作为 data-* 属性，并且很多 *** 答案建议我应该使用 JSON.stringify()；
所以，如果我有这个数组：['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 实体，因为 &quot; 将在<textarea> 中显示原样。
> 只需“html 编码”该值。忽略提供如何做到这一点的示例。
@AlxVallejo 尚未指定生成 JSON 的语言/环境。 "大多数服务器端语言都有这样的功能, ..";其中大部分在搜索时都能找到。
@user2864740 好的，你引用了 encodeURIComponent 这是 JavaScript。那么你会用什么代替呢？
encodeURIComponent 被原帖引用，因此值得特别提及；根据答案，JavaScript 没有定义这样的方法（根据 ECMAScript 规范或 W3C DOM），尽管可以找到许多第三方库之一。同样，取决于上下文。什么是 html 中的 data-reactid 属性？
】什么是html中的data-reactid属性？【英文标题】：what\'sdata-reactidattributeinhtml?【发布时间】：2013-07-0906:38:42【问题描述】：当我浏览某些页面的HTML时，我注意到其中一些使用此属性“data-reactid”，例如：<adata-reactid="......"></... 查看详情
根据属性'data-sort'对jQuery中的div进行排序？
】根据属性\\\'data-sort\\\'对jQuery中的div进行排序？【英文标题】：SortdivsinjQuerybasedonattribute\'data-sort\'?根据属性\'data-sort\'对jQuery中的div进行排序？【发布时间】：2011-09-0206:53:15【问题描述】：如果我有多个div：<divdata-sort=\'1\'>... 查看详情
Vuejs 中的属性突变
】Vuejs中的属性突变【英文标题】：PropertymutationinVuejs【发布时间】：2017-06-2810:05:30【问题描述】：所以我有多个这样的代码：<inputid="data"type="text"v-model="data"><labelfor="data">Data</label>并且我试图用它来制作一个属性，... 查看详情
Vue.js 组件中的随机“data-v-*”属性
】Vue.js组件中的随机“data-v-*”属性【英文标题】：random"data-v-*"attributeinVue.jscomponents【发布时间】：2017-07-3018:58:19【问题描述】：在使用Vue.js进行实验时，我注意到的第一件事是我定义为singlefilecomponent并包含为自定义元... 查看详情
Core Data / NSManagedObject / NSFetchedResultsController 中的多属性“事务”？
】CoreData/NSManagedObject/NSFetchedResultsController中的多属性“事务”？【英文标题】：Multi-property"transactions"inCoreData/NSManagedObject/NSFetchedResultsController?【发布时间】：2010-02-0423:54:36【问题描述】：是否可以设置NSManagedObject的多个... 查看详情
如何评估 data 属性中的 Vue.js 组件道具？
】如何评估data属性中的Vue.js组件道具？【英文标题】：HowtoevaluateVue.jscomponentpropsinthedataproperty?【发布时间】：2017-12-1419:36:43【问题描述】：我有2个组件：Post和Comments。在Post组件内部，有一个Comments组件，它有3个props：postId、numC... 查看详情
如何获取 Core Data 中的关系项属性？
】如何获取CoreData中的关系项属性？【英文标题】：HowtogetatarelationshipitemspropertiesinCoreData?【发布时间】：2010-11-1716:38:08【问题描述】：假设您有一个名为Workshop的核心数据对象。它与Student对象具有一对多关系。如何在Workshop中创... 查看详情
了解 data-dismiss 属性在 Bootstrap 中的工作原理
】了解data-dismiss属性在Bootstrap中的工作原理【英文标题】：Understandinghowdata-dismissattributeworksinBootstrap【发布时间】：2016-04-1004:44:50【问题描述】：我是Bootstrap的新手，我遇到了这个例子的问题：<!--Triggerthemodalwithabutton--><but... 查看详情
如何将计算属性中的 vuex 数据传递给 data prop
】如何将计算属性中的vuex数据传递给dataprop【英文标题】：howtopassvuexdataincomputedpropertytodataprop【发布时间】：2021-01-0503:19:02【问题描述】：我需要帮助从vuex发送发送数据，并在计算中：到数据prop(data()return)我试过手表：但我的... 查看详情
需要一些帮助来理解 Core Data 中的瞬态属性
】需要一些帮助来理解CoreData中的瞬态属性【英文标题】：NeedsomehelpunderstandingtransientpropertiesinCoreData【发布时间】：2011-11-2204:40:02【问题描述】：我阅读了有关瞬态属性的文档，但我无法真正理解它们的用途。如果我有这样的NSMa... 查看详情
从一个复制并转换为 Core Data 中的另一个属性
】从一个复制并转换为CoreData中的另一个属性【英文标题】：CopyfromoneandconverttoanotherAttributeinCoreData【发布时间】：2015-01-2419:58:25【问题描述】：在我的应用程序中，我使用了一个核心数据模型，其中只有一个实体和一些属性。我... 查看详情
如何插入 data.json 以使组件与界面中的所有属性（打字稿）发生反应
】如何插入data.json以使组件与界面中的所有属性（打字稿）发生反应【英文标题】：howtoinsertdata.jsontoreactcomponentwithallpropertiesininterface(typescript)【发布时间】：2021-06-1408:47:17【问题描述】：i有一个productpage组件、data.json和接口IProd... 查看详情
Core Data 中的 URI 类型属性：如何使用 NSPredicate 进行查询
】CoreData中的URI类型属性：如何使用NSPredicate进行查询【英文标题】：URItypedattributesinCoreData:howtoquerywithNSPredicate【发布时间】：2022-01-0804:36:08【问题描述】：我有一个CoreData-Entity，它存储一个名为“imageUrl”的“URI”类型的属性。... 查看详情
将序列号属性附加到javascript中的对象数组
】将序列号属性附加到javascript中的对象数组【英文标题】：Appendserialnumberpropertytoarrayofobjectsinjavascript【发布时间】：2017-03-1916:11:10【问题描述】：我在javascript中有一个对象数组。varobj_arr=[DATA_ID:281,DATA_NAME:\'CIM\',DATA_STATE:\'0\',DATA_... 查看详情
Core Data 和 Swift 中的计算属性与持久存储
】CoreData和Swift中的计算属性与持久存储【英文标题】：Computedpropertiesvs.persistentstorageinCoreDataandSwift【发布时间】：2015-10-2204:05:04【问题描述】：我觉得这是一个愚蠢的问题，但我是新手，找不到明确的答案。我有一个Activity实体... 查看详情
如何从 Core Data 中的关系相关实体获取属性？
】如何从CoreData中的关系相关实体获取属性？【英文标题】：HowdoIgetattributesfromrelationship-relatedentityinCoreData?【发布时间】：2011-05-0220:32:46【问题描述】：我对ObjC有经验，但对CoreData比较陌生。到目前为止，这一直很简单，但我有... 查看详情
如何在 ASP.NET MVC 中的 HTML-5 data-* 属性中使用破折号
】如何在ASP.NETMVC中的HTML-5data-*属性中使用破折号【英文标题】：HowtousedashesinHTML-5data-*attributesinASP.NETMVC【发布时间】：2011-02-0100:08:12【问题描述】：我正在尝试在我的ASP.NETMVC1项目中使用HTML5data-attributes。（我是C#和ASP.NETMVC新手... 查看详情
vue组件中的data为什么是函数。
...在很多地方都会调用。 如果data不是函数，而是属性，就又可能会发生多个地方的相同组件操作同一个Data属性，导致数据混乱。而如果是函数，因为组件data函数的返回值是属性：属性名，所以每次返回都会在堆空间创建... 查看详情