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