【JavaScript问题】JavaScript 使用 JSTL 表达式处理复杂字符串 json 解析报错

女爷i 2022-12-10 08:57 79阅读 0赞

### 文章目录 ###

*   *   *  问题描述
         *  问题分析
         *  解决方法
 *  微信公众号

### 问题描述 ###

开发中，遇到这么一个问题，前端显示后台返回的json数据，通常情况下我们会使用`JSON.parse()`方法将后台返回的数据进行解析，转换成json格式，然后进行下一步操作，比如遍历等。这里遇到的问题是当我们使用`JSON.parse()`方法解析后台返回的json时，json中含有富文本编辑器的内容，比如说数据库中保存的富文本编辑器的内容、文章内容、复杂文本内容时，会json解析报错，下图是数据库中存储的内容和报错信息

Uncaught SyntaxError: Unexpected token : in JSON at position 9

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzYyMjM3_size_16_color_FFFFFF_t_70_pic_center]

### 问题分析 ###

数据库中保存的内容，针对json来说，并不确定的特殊字符太多，不可能统一处理json，比如单引号、双引号的转义

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzYyMjM3_size_16_color_FFFFFF_t_70_pic_center 1]

### 解决方法 ###

网页头部需要添加约束

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:forEach var="article" items="${articleList}" varStatus="status">
            console.log(`${article.content}`);
        </c:forEach>

我这里获取字符串使用的是\` \`，不是常规使用的 ’ ’ 或者 " "

# 微信公众号 #

![每天Get一个小技巧][Get]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzYyMjM3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/80c1e44aa2eb441fa4d4fd514a5473cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzYyMjM3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/41ba1d7b36584c77a701206162211a25.png
[Get]: /images/20221123/1c46d00df84b49ee9bd06e34d4b27784.png