当 JSON 字符串化字符串具有空格分隔值时，数据属性内部会中断

Question

 var dataObj=  {
      "Cast_Code": "NA",
      "Mat_Code": "xxxx",
      "Pin_Num": "xxxx",
      "MatDetail": [
        {
          "Batch_Number": "Patch PA",
          "Batch_Expiry": "No Expiry",
          "Batch_Quantity": "xxx",
          "Return_Qty": "0.00"
        }
      ]
    }

我试图将上面的对象作为属性分配给这样的元素：

content +='<div class="save_data" data-savereturn='+JSON.stringify(dataObj)+'></div>';

但在查看源代码时，它会显示在 HTML 中，如下所示：

<div class="save_return" data-savereturn="{"Cast_Code": "NA",...,
      "MatDetail": [
        {                //Notice the double quote between "Patch PA"
          "Batch_Number": "Patch" pa","batch_expiry": "no expiry","batch_quantity": "xxx","return_qty": "0.00""
        }
      ]
    }"></div>

我进一步尝试了

console.log(JSON.stringify(dataObj));

它会正确记录输出，而不会像将其分配给data-savereturn.

该dataObj在jQuery.each循环中创建，然后分配给相应的 HTML 元素。

无法弄清楚 JSON 的破坏，即空格后部分的截断和小写。

当单词之间没有空格时，不会发生这种情况

"Batch_Number": "PatchPA",

更新：

开始引号双 (")

content +='<div class="save_data" data-savereturn="'+JSON.stringify(dataObj)+'"></div>';

    
    it shows:

    <div class="save_return" data-savereturn="{" Cast_Code":"na","Mat_Code":"xyz","Pin_Num":"xyz","batchdetail":[{"batch_number":"patch="" na","batch_expiry":"no="" expiry","batch_quantity":"20","return_qty":"0.00"}]}"=""></div>

    jQuery('.selector').data('savereturn')
     gives
    {
      "savereturn": "{"
    }
    which gives an error on JSON.parse "Uncaught SyntaxError: Unexpected end of JSON input"



  

将起始引号更改为单引号 (')

     content +="<div class='save_data' data-savereturn='"+JSON.stringify(dataObj)+"'></div>";
    
        <div class="save_return" data-savereturn="{"Request_Code":"NA";"Mat_Code":"xx";"In_num":"xx","BatchDetail":[{"Batch_Number":"Batch NA","Batch_Expiry":"No Expiry","Batch_Quantity":"10","Return_Qty":"0.00"}]}"></div>

jQuery('sel').data('savereturn') gives:
{
  "Cast_Code": "NA",
  "Mat_Code": "tttt",
  "Tin_Number": "ppp",
  "PatchDetail": [
    {
      "Batch_Number": "Patch NA",
      "Batch_Expiry": "No Expiry",
      "Batch_Quantity": "10",
      "Return_Qty": "0.00"
    }
  ]
}
which also give error on JSON.parse 

未捕获的语法错误：JSON 中位置 1 处出现意外标记 o

第二个看起来正确，但 JSON 仍然无效。

Answer 1

您需要在包含空格以及其他标点符号的属性两边加上引号，因此最好始终引用您的属性。由于 JSON 将包含双引号，因此您应该在属性两侧使用单引号。

content +="<div class='save_data' data-savereturn='"+JSON.stringify(dataObj)+"'></div>";

dataObj请注意，如果;中有任何单引号，则这将无法正常工作。它们不会被编码以防止终止data-savereturn属性。

如果您使用 jQuery，那么创建这样的元素会更容易：

var element = $("<div>", {
    "class": "save_data",
    data: { "savereturn": dataObj }
});

这也解决了这个问题。在普通 JavaScript 中，这将是：

let element = document.createElement("div");
element.classList.add("save_data");
element.datalist.savereturn = JSON.stringify(dataObj);