时间戳

首页 > 解决方案 > 字符串中特殊字符的 JSON.parse 和 JSON.stringify 错误

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

问题描述

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

错误是：

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

这指向JSON.stringify

在此处输入图像描述

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

数据库：

在此处输入图像描述

更新：

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

标签： javascriptjqueryjsonstringify

解决方案

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

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

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

或者可能在 JavaScript 中

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

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

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

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

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

或者，如果您使用单引号将属性括起来（通常不这样做，但肯定是一个选项），则需要将其更改为&apos;：

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 时才需要手动更改"为。&quot;

推荐阅读