字符串中特殊字符的 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>

我找到了this，但这在我的情况下有点不同。

当我尝试在开发工具中看到的数据上使用 JSON.stringify 时

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

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

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

错误是：

未捕获的 SyntaxError：JSON 输入意外结束

指向JSON.stringify

添加了一个 sn-p 但它没有重现问题所以我添加了一个图像

数据库：

更新：

我从 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 时，才需要手动将 " 更改为 "。