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區(qū)域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
