JSON.parse解析具有HTML內容

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"}]'); 

的JSON被認爲是JSON時拋出錯誤我試過時有效的JSON https://jsonformatter.curiousconcept.com/

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。它是特殊字符。您需要跳過\（作爲\\），以便轉義序列由JSON解析器評估，而不是由JavaScript編譯器評估。

---

也就是說，生成JSON然後將其嵌入爲立即解析的字符串文字看起來過於複雜和毫無意義。首先使用JS數組文本，然後跳過所有的嵌套。

Answer 3

由於您嘗試將對象轉換爲字符串，然後對其進行解析，而沒有進行正確的轉換，您會收到錯誤消息。

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

1. 直接用作對象
2. 第一轉換對象以正確的JSON字符串透過JSON.stringify，然後解析它。請參見下面的示例代碼

示例代碼

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"}]));