JSON.parse 在解析包含 HTML 內容的 JSON 時拋出錯誤

Question

我正在嘗試使用以下代碼，但在 JSON 解析器上不斷出現錯誤

var data = JSON.parse('[{"thisFieldname":"item-company-1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-company-field field-item\">\n\t\t\t\t\t\t<div class=\"fake-data\">\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t<div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90; display: block;\"></div>","dataFieldName":"item-company-1","locationIndex":"0","locationLeft":"427.891px","locationTop":"88.5625px","itemWidth":"100px","itemHeight":"34px","fieldRole":"","fieldDefault":"","fieldTooltip":"","fieldValidationRule":"","fieldValidationCharSet":"","fieldValidationDateFormat":"","fieldDisplayFormat":"","fieldValidationCountry":"","fieldValidationMaxLen":"","fieldValidationMinVal":"","fieldValidationMaxVal":"","fieldValidationRegExp":"","fieldValidationFormula":"","fieldValidationErrMsg":"","valid":"","condition-field":"","condition-type":"","condition-value-select":"","fontName":"","fontSize":"","fontAlign":"","fieldColorPicker":"","fieldRequired":"false","fieldReadOnly":"false","fieldMasked":"false","fieldMultiline":"false"}]');

當我在https://jsonformatter.curiousconcept.com/上嘗試時，據說 JSON 是有效的 JSON

Answer 1

你的推理是錯誤的。 您檢查了表達式expr是有效的 JSON，然后認為JSON.parse(' expr ')會起作用。

問題是字符串文字不能那樣工作。

表達式"\\t"是有效的 JSON，但字符串文字'"\\t"'變成了字符串" " ，這不是有效的 JSON。 如果要獲取字符串"\\t" ，則需要字符串文字'"\\\\t"' 。

所以你可以轉義所有這些字符：

 console.log(JSON.parse("[{\\"thisFieldname\\":\\"item-company-1\\",\\"thisFieldHTML\\":\\"\\\\n\\\\t\\\\t\\\\t\\\\t\\\\t<div class=\\\\\\"new-company-field field-item\\\\\\">\\\\n\\\\t\\\\t\\\\t\\\\t\\\\t\\\\t<div class=\\\\\\"fake-data\\\\\\">\\\\n\\\\t\\\\t\\\\t\\\\t\\\\t\\\\t\\\\tCompany\\\\n\\\\t\\\\t\\\\t\\\\t\\\\t\\\\t</div>\\\\n\\\\t\\\\t\\\\t\\\\t\\\\t</div>\\\\n\\\\t\\\\t\\\\t\\\\t<div class=\\\\\\"ui-resizable-handle ui-resizable-e\\\\\\" style=\\\\\\"z-index: 90; display: block;\\\\\\"></div><div class=\\\\\\"ui-resizable-handle ui-resizable-s\\\\\\" style=\\\\\\"z-index: 90; display: block;\\\\\\"></div><div class=\\\\\\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\\\\\\" style=\\\\\\"z-index: 90; display: block;\\\\\\"></div>\\",\\"dataFieldName\\":\\"item-company-1\\",\\"locationIndex\\":\\"0\\",\\"locationLeft\\":\\"427.891px\\",\\"locationTop\\":\\"88.5625px\\",\\"itemWidth\\":\\"100px\\",\\"itemHeight\\":\\"34px\\",\\"fieldRole\\":\\"\\",\\"fieldDefault\\":\\"\\",\\"fieldTooltip\\":\\"\\",\\"fieldValidationRule\\":\\"\\",\\"fieldValidationCharSet\\":\\"\\",\\"fieldValidationDateFormat\\":\\"\\",\\"fieldDisplayFormat\\":\\"\\",\\"fieldValidationCountry\\":\\"\\",\\"fieldValidationMaxLen\\":\\"\\",\\"fieldValidationMinVal\\":\\"\\",\\"fieldValidationMaxVal\\":\\"\\",\\"fieldValidationRegExp\\":\\"\\",\\"fieldValidationFormula\\":\\"\\",\\"fieldValidationErrMsg\\":\\"\\",\\"valid\\":\\"\\",\\"condition-field\\":\\"\\",\\"condition-type\\":\\"\\",\\"condition-value-select\\":\\"\\",\\"fontName\\":\\"\\",\\"fontSize\\":\\"\\",\\"fontAlign\\":\\"\\",\\"fieldColorPicker\\":\\"\\",\\"fieldRequired\\":\\"false\\",\\"fieldReadOnly\\":\\"false\\",\\"fieldMasked\\":\\"false\\",\\"fieldMultiline\\":\\"false\\"}]"));

或者直接使用對象，讓JS解析：

 console.log([{"thisFieldname":"item-company-1","thisFieldHTML":"\\n\\t\\t\\t\\t\\t<div class=\\"new-company-field field-item\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\"fake-data\\">\\n\\t\\t\\t\\t\\t\\t\\tCompany\\n\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t<div class=\\"ui-resizable-handle ui-resizable-e\\" style=\\"z-index: 90; display: block;\\"></div><div class=\\"ui-resizable-handle ui-resizable-s\\" style=\\"z-index: 90; display: block;\\"></div><div class=\\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\\" style=\\"z-index: 90; display: block;\\"></div>","dataFieldName":"item-company-1","locationIndex":"0","locationLeft":"427.891px","locationTop":"88.5625px","itemWidth":"100px","itemHeight":"34px","fieldRole":"","fieldDefault":"","fieldTooltip":"","fieldValidationRule":"","fieldValidationCharSet":"","fieldValidationDateFormat":"","fieldDisplayFormat":"","fieldValidationCountry":"","fieldValidationMaxLen":"","fieldValidationMinVal":"","fieldValidationMaxVal":"","fieldValidationRegExp":"","fieldValidationFormula":"","fieldValidationErrMsg":"","valid":"","condition-field":"","condition-type":"","condition-value-select":"","fontName":"","fontSize":"","fontAlign":"","fieldColorPicker":"","fieldRequired":"false","fieldReadOnly":"false","fieldMasked":"false","fieldMultiline":"false"}]);

Answer 2

\\n在 JavaScript 字符串文字中插入一個新行字符。 JSON 字符串中禁止使用文字換行。

\\"在 JavaScript 字符串文字中插入一個"字符。 JSON 字符串中的文字"將終止該字符串。

問題不在於 HTML。 它是特殊字符。 您需要轉義\\ s（作為\\\\ ），以便轉義序列由 JSON 解析器而不是 JavaScript 編譯器計算。

---

也就是說，生成 JSON 然后將其嵌入為立即解析的字符串文字似乎過於復雜和毫無意義。 只需首先使用 JS 數組文字並跳過所有嵌套。

Answer 3

您收到錯誤是因為您試圖將 Object 轉換為字符串然后解析它，而沒有進行適當的轉換。

您可以通過兩種方式使用該對象。

1. 直接作為對象使用
2. 首先使用 JSON.stringify 將 Object 轉換為正確的 json 字符串，然后解析它。 見下面的示例代碼

示例代碼

data = [{"thisFieldname":"item-company-   1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-company-field field-item\">\n\t\t\t\t\t\t<div class=\"fake-data\">\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t<div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90; display: block;\"></div>","dataFieldName":"item-company-1","locationIndex":"0","locationLeft":"427.891px","locationTop":"88.5625px","itemWidth":"100px","itemHeight":"34px","fieldRole":"","fieldDefault":"","fieldTooltip":"","fieldValidationRule":"","fieldValidationCharSet":"","fieldValidationDateFormat":"","fieldDisplayFormat":"","fieldValidationCountry":"","fieldValidationMaxLen":"","fieldValidationMinVal":"","fieldValidationMaxVal":"","fieldValidationRegExp":"","fieldValidationFormula":"","fieldValidationErrMsg":"","valid":"","condition-field":"","condition-type":"","condition-value-select":"","fontName":"","fontSize":"","fontAlign":"","fieldColorPicker":"","fieldRequired":"false","fieldReadOnly":"false","fieldMasked":"false","fieldMultiline":"false"}];



data = JSON.parse(JSON.stringify([{"thisFieldname":"item-company-   1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-company-field field-item\">\n\t\t\t\t\t\t<div class=\"fake-data\">\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t<div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90; display: block;\"></div>","dataFieldName":"item-company-1","locationIndex":"0","locationLeft":"427.891px","locationTop":"88.5625px","itemWidth":"100px","itemHeight":"34px","fieldRole":"","fieldDefault":"","fieldTooltip":"","fieldValidationRule":"","fieldValidationCharSet":"","fieldValidationDateFormat":"","fieldDisplayFormat":"","fieldValidationCountry":"","fieldValidationMaxLen":"","fieldValidationMinVal":"","fieldValidationMaxVal":"","fieldValidationRegExp":"","fieldValidationFormula":"","fieldValidationErrMsg":"","valid":"","condition-field":"","condition-type":"","condition-value-select":"","fontName":"","fontSize":"","fontAlign":"","fieldColorPicker":"","fieldRequired":"false","fieldReadOnly":"false","fieldMasked":"false","fieldMultiline":"false"}]));

Answer 4

避免字符串文字擴展（由其他答案解釋）的另一種選擇是使用自 ES6 以來可用的String.raw 。

var data = JSON.parse(String.raw`[{"thisFieldname":"item-company-1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-company-field field-item\">\n\t\t\t\t\t\t<div class=\"fake-data\">\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t<div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90; display: block;\"></div>","dataFieldName":"item-company-1","locationIndex":"0","locationLeft":"427.891px","locationTop":"88.5625px","itemWidth":"100px","itemHeight":"34px","fieldRole":"","fieldDefault":"","fieldTooltip":"","fieldValidationRule":"","fieldValidationCharSet":"","fieldValidationDateFormat":"","fieldDisplayFormat":"","fieldValidationCountry":"","fieldValidationMaxLen":"","fieldValidationMinVal":"","fieldValidationMaxVal":"","fieldValidationRegExp":"","fieldValidationFormula":"","fieldValidationErrMsg":"","valid":"","condition-field":"","condition-type":"","condition-value-select":"","fontName":"","fontSize":"","fontAlign":"","fieldColorPicker":"","fieldRequired":"false","fieldReadOnly":"false","fieldMasked":"false","fieldMultiline":"false"}]`);

---

簡短示例：

String.raw`Hi\n${2+3}!`;
// 'Hi\n5!', the character after 'Hi'
// is not a newline character,
// '\' and 'n' are two characters.

---

閱讀更多https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw