字符串中特殊字符的 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 時才需要手動將"更改為" 。