解析具有HTML内容的JSON时，JSON.parse会引发错误 [英] JSON.parse throws error when parsing JSON that has HTML content

问题描述

我有以下代码，我正在尝试使用，并且我在JSON解析器上一直收到错误

I have the following code that I'm trying to use and I keep getting an error on the JSON parser

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/

推荐答案

你的推理是错误的。您检查表达式 expr 是否为有效JSON，然后认为 JSON.parse（' expr '）可行。

Your reasoning is wrong. You checked that an expression expr is valid JSON, and then thought that JSON.parse('expr') would work.

问题是字符串文字不能像那样工作。

The problem is that string literals don't work like that.

表达式\t是有效的JSON，但是字符串文字'\ t'成为字符串，这是无效的JSON。如果你想得到字符串\t，你需要字符串文字'\\t'。

The expression "\t" is valid JSON, but the string literal '"\t"' becomes the string " ", which is not valid JSON. If you want to get the string "\t", you need the string literal '"\\t"'.

所以你可以逃脱所有这些字符：

So you can escape all these characters:

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解析它：

Or directly use the object and let the JS parse it:

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

这篇关于解析具有HTML内容的JSON时，JSON.parse会引发错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！