13.14 SpringBoot集成JSP模板引擎：JSP页面样式乱掉
关键词：JS编码&解码&HTML转义escape , unescape
Blog功能模块，显示文章详情，文章内容中有jsp代码，页面乱掉。如下图所示
原因分析
在如下的HTML/JSP源代码中，有特殊字符（比如说，html标签，</textarea>）
<textarea>HTML/JSP源代码</textarea>
导致页面样式乱。
解决方案
对“HTML/JSP源代码”这段文本进行escape编码。在js中再进行解码。
jsp页面中对文本的输出进行escape编码，escapeXml="true"：
<%--escapeXml:是否转换特殊字符--%>
<textarea id="blogContent" style="display: none"><c:out value='${blog.content}' escapeXml="true"></c:out></textarea>
在js中对编码后的文本作解码unescape处理：
/**
* Created by jack on 2017/3/29.
*/
define(function (require) {
"use strict";
require('meditor');
$(function () {
var parser = new Mditor.Parser();
// var blogContent = document.getElementById('blogContent').innerHTML;//这个遇到<>等特殊字符会被转译
var blogContent = document.getElementById('blogContent').value; //直接取原本的字符串。不会被转译，默认html页面中textarea区域text需要escape编码
blogContent = unescape(blogContent);//unescape解码
var html = parser.parse(blogContent);
$('#rest-blog-body').append(html);
hljs.initHighlightingOnLoad();
//源码高亮
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
//编辑文章
$('#goEditBlog').on('click',function () {
var blogId = $('#blogId').val();
location.href = 'goEditBlog?id=' + blogId;
});
});
});
测试验证
验证OK。
工程源码：https://github.com/Jason-Chen-2017/restfeel/tree/restfeel_jsp_escape_unescape_2017.5.7
