Question

我在React中有布局构建器来保存我使用ImmutableJS对象的数据结构和文本。

具有text或css样式属性的此类结构将作为JSON保存到数据库中。

为了使它成为JSON我使用json-immutable库：序列化，反序列化函数。

在数据库中保存之后，我将反应组件的配置作为javascript变量提供。例如，我的后端生成带有变量的js文件，或者使用script标签直接在html代码中打印小部件。

数据是JSON或解码的javascript。

保存特殊字符时遇到的最大问题。

例如，如果某人在某个属性中设置了'单引号，则会直接保存。但是当我用html代码打印它时

var myConfig = '{anyjson}';

当内部JSON是单引号解析器抛出错误。使用双引号&（ampersant）或html代码中使用的任何字符（例如<,/>

单引号我替换为\＆＃39;当我用HTML代码打印它时。

但我认为确实存在以任何方式保存所有数据都保存在JSON中，并且仍然可以通过反序列化函数轻松解码，以将JSON解析为ImmutableJS对象。

代码示例 https://jsfiddle.net/jaroapp/2yzud6ua/2/

var structure = {
   "__iterable":"Map",
   "data":[
      [
         "entityMap",
         {
            "__iterable":"Map",
            "data":[
               [
                  "html_el_qb7tyhi",
                  {
                     "__iterable":"Map",
                     "data":[
                        [
                           "imported",
                           false
                        ],
                        [
                           "path",
                           "html_el_qb7tyhi"
                        ],
                        [
                           "componentData",
                           {
                              "__iterable":"Map",
                              "data":[

                              ]
                           }
                        ],
                        [
                           "draftjsObject",
                           {
                              "__iterable":"OrderedMap",
                              "data":[

                              ]
                           }
                        ],
                        [
                           "draftjs",
                           true
                        ],
                        [
                           "data",
                           {
                              "__iterable":"OrderedMap",
                              "data":[
                                 [
                                    "text",
                                    "B&B is the best company. It's my hope for new markets."
                                 ]
                              ]
                           }
                        ],
                        [
                           "chunk",
                           null
                        ],
                        [
                           "style",
                           {
                              "__iterable":"OrderedMap",
                              "data":[
                                 [
                                    "background-image",
                                    "url(\"/path/to/image.jpg\")"
                                 ]
                              ]
                           }
                        ],
                        [
                           "attr",
                           {
                              "__iterable":"OrderedMap",
                              "data":[

                              ]
                           }
                        ],
                        [
                           "runEditor",
                           false
                        ],
                        [
                           "entityMap",
                           {
                              "__iterable":"OrderedMap",
                              "data":[

                              ]
                           }
                        ],
                        [
                           "type",
                           "div"
                        ],
                        [
                           "key",
                           "html_el_qb7tyhi"
                        ]
                     ]
                  }
               ],
               [
                  "html_el_2dgupn7",
                  {
                     "__iterable":"Map",
                     "data":[
                        [
                           "imported",
                           false
                        ],
                        [
                           "path",
                           "html_el_2dgupn7"
                        ],
                        [
                           "componentData",
                           {
                              "__iterable":"Map",
                              "data":[

                              ]
                           }
                        ],
                        [
                           "draftjsObject",
                           {
                              "entityMap":{

                              },
                              "blocks":[
                                 {
                                    "key":"3ia22",
                                    "text":"Text saved with html inside",
                                    "type":"unstyled",
                                    "depth":0,
                                    "inlineStyleRanges":[

                                    ],
                                    "entityRanges":[

                                    ],
                                    "data":{

                                    }
                                 }
                              ]
                           }
                        ],
                        [
                           "draftjs",
                           true
                        ],
                        [
                           "data",
                           {
                              "__iterable":"OrderedMap",
                              "data":[
                                 [
                                    "text",
                                    null
                                 ],
                                 [
                                    "html",
                                    "<p class=\"md-block-unstyled\">Text saved with html inside</p>"
                                 ]
                              ]
                           }
                        ],
                        [
                           "chunk",
                           null
                        ],
                        [
                           "style",
                           {
                              "__iterable":"OrderedMap",
                              "data":[

                              ]
                           }
                        ],
                        [
                           "attr",
                           {
                              "__iterable":"OrderedMap",
                              "data":[

                              ]
                           }
                        ],
                        [
                           "runEditor",
                           false
                        ],
                        [
                           "entityMap",
                           {
                              "__iterable":"OrderedMap",
                              "data":[

                              ]
                           }
                        ],
                        [
                           "type",
                           "div"
                        ],
                        [
                           "key",
                           "html_el_2dgupn7"
                        ]
                     ]
                  }
               ]
            ]
         }
      ],
      [
         "containersMap",
         {
            "__iterable":"Map",
            "data":[

            ]
         }
      ],
      [
         "componentsMap",
         {
            "__iterable":"Map",
            "data":[
               [
                  "entityMap",
                  {
                     "__iterable":"OrderedMap",
                     "data":[

                     ]
                  }
               ]
            ]
         }
      ]
   ]
};

这种结构我将参数设置为ReactJS组件。

如果我将其设置为JSON并用引号括起来，则浏览器会抛出错误。如果我将它作为JavaScript对象设置到React组件中，我就不能从这个组件中创建ImmutableJS，因为这个结构是由这个读取的 https://www.npmjs.com/package/json-immutable库（我使用相同的方法从Immutable JS制作JSON以将其保存在数据库中）;

提前感谢任何提示。

Answer 1

我解决了这个问题。简短说明，也许对某人有帮助。

我从json-immutable包中获取带反序列化函数的文件。我将函数反序列化修改为

export function deserialize(json){
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  if(typeof json==='string'){
    return JSON.parse(json, function(key, value, options){
      return revive(key, value, options);
    });
  }else{
    return JSON.parse(JSON.stringify(json), function(key, value, options){
      return revive(key, value, options);
    });
  }
}

包中的函数使用JSON.parse for param。也许这不是最优雅的解决方案，但我没有时间找到不“重新json”对象的方法。标准Object.keys和map返回原始对象。

Javascript / json保留在数据库和特殊字符

1 个答案: