字符串中特殊字符的 JSON.parse 和 JSON.stringify 错误

Question

 console.log(JSON.stringify($('.btn').attr('data-obj')))

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-info user_action" data-action="edit_faqs" data-obj="{SysID:2,Artist:Json Mras,Song:I'm yours}" data-toggle="modal " data-target="#SongsModal "><i class="fa fa-edit "></i> Edit</button>

我发现了这个，但在我的情况下这有点不同。

当我尝试对数据使用 JSON.stringify 时，我可以在开发工具中看到

//I want I'm Yours
"{\"Song\":\"I"

数据存储在我的数据库中，我在 ajax 请求中获取它，我想对它使用JSON.stringify ，因为我将它作为data-*放在按钮上，然后在我单击按钮时使用。 单击按钮时，我想使用JSON.parse以便我可以对其进行迭代。

如何转义JSON.stringify和JSON.parse所有特殊字符

错误是：

未捕获的语法错误：JSON 输入意外结束

那指向JSON.stringify

添加了一个片段但它没有重新创建问题所以我添加了一个图像

数据库：

更新：

我从ajax请求中获取数据。 获取数据后，我使用data_array = JSON.stringify(data[i]); 然后将数据应用为data-obj='" + data_array + "'

Answer 1

这不是 JSON 的问题，而是您滥用 HTML 的问题。

您将原始字符串插入到 HTML 属性中，可能来自模板，可能通过执行类似的操作

<button data-obj="<?php echo json_encode($data); ?>">

或者可能在 JavaScript 中

container.innerHTML = '<button data-obj="' + JSON.stringify(data) + '">';

所以你的引号最终会与 HTML 冲突。 您需要将引号更改为 HTML 实体； 如果您在 HTML 属性周围使用双引号（最常见的情况），则最低限度是将双引号"更改为" 。

您还没有告诉我们如何将内容插入到 HTML 中，所以在您澄清之前我无法告诉您如何去做。

编辑：显然您是通过连接在 JavaScript 中构建 HTML。 在这种情况下，我展示的解决方案将起作用：

container.innerHTML = '<button data-obj="' + data_array.replace(/"/g, '&quot;') + '">';

或者，如果你使用单引号括住属性（不常见，但肯定是一个选项），你将需要改变那些' 反而：

container.innerHTML = "<button data-obj='" + data_array.replace(/'/g, '&apos;') + "'>";

然而，考虑到我们正在谈论的是 JavaScript，它可以与 DOM 一起工作，而且 DOM 知道什么是什么……还有很多其他的解决方案。 最原始的一种是直接使用 DOM：

let button = document.createElement('button');
button.setAttribute('data-obj', data_array);
container.appendChild(button);

执行此操作时，JavaScript 直接操作 DOM，而不是 HTML，因此不需要转义。

高于此级别将使用像 jQuery 这样的库：

$('<button>').data('obj', data_array).appendTo('#container');

高于此的一个级别是使用采用数据绑定的库，例如 Angular、React、Vue、Ractive……您只需在模型上设置值，文档就会自动反映该更改。

仅当您直接操作 HTML 时才需要手动将"更改为" 。