商丘建网站阿里巴巴的网站架构

背景

开始的时候，发现一个很奇怪的现象

富文本编辑器，前端存储带有"的内容，回显的时候解析就会出问题

后来发现，其实是只要是需要带有\进行转义的内容就会有问题

排查

从前端提交数据，后端获取数据，到数据库存储数据，再从数据库查询返回给前端这个过程

PS：我这里的内容因为是一个动态表单，所以是一个数组，里面有一个富文本，我省略了一些无关的数据

1. 富文本的字段内容为： "<p> <a href=\"2\" target=\"_blank\">12</a> </p>"
2. 把动态表单arr进行JSON.stringify进行json一遍，结果为<p> <a href=\\"2\\" target=\\"_blank\\">12</a> </p>
3. 然后前端进行post提交的时候，作为body本身又会被json一次
4. 但是到了后端，本身又会被parse一次，所以这两次相互抵消
5. 然后会把<p> <a href=\"2\" target=\"_blank\">12</a> </p>这个存入数据库，这里看起来和我们预期是一样的
6. 然后关键的来了，存储到数据库之后变成了<p> <a href="2" target="_blank">12</a> </p>，也就是这里丢失了转义
7. 导致查询返回给前端的时候，变成了<p> <a href=\"2\" target=\"_blank\">12</a> </p>，这里进行parse解析的时候报错了
   我这里贴一下完整的测试数据

   let a = [{id: 28,name: "",logo: "",arr: '[{"text":"","content":"<p> <a href="2" target="_blank">12</a> </p>"}]',create_time: "2024-06-14 11:05:23",},
   ];
   JSON.parse(a[0].arr);
   

解决方案

开始的时候本想通过mysql或者express之类的配置解决这个问题，但是没有找到解决方案

最后用一个比较丑陋的方式解决的：就是在存入数据库之前用替换的方式手动增加一个\，这样的话相当于没丢

const realSql = insertSql.replace(/\\/g, "\\\\");

如果有大佬有更好的方案欢迎留言