开发者社区> 程序员诗人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JSP页面样式乱掉:JS编码&解码&HTML转义escape , unescape

简介: JSP页面样式乱掉:JS编码&解码&HTML转义escape , unescape Blog功能模块,显示文章详情,文章内容中有jsp代码,页面乱掉。如下图所示 原因分析 在如下的HTML/JSP源代码中,有特殊字符(比如说,html标签,) HTML/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。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 专题之从零实现 jQuery 的 extend
JavaScritp 专题系列第七篇,讲解如何从零实现一个 jQuery 的 extend 函数
37 0
JavaScript专题之jQuery通用遍历方法each的实现
JavaScript 专题系列第十一篇,讲解 jQuery 通用遍历方法 each 的实现
48 0
JavaScript闭包(一)——实现
闭包的官方的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
41 0
JavaScript中Promises/A+规范的实现
Promises是一种异步编程模型,通过一组API来规范化异步操作,这样也能够让异步操作的流程控制更加容易。
42 0
JavaScript深入之call和apply的模拟实现
JavaScript深入系列第十篇,通过call和apply的模拟实现,带你揭开call和apply改变this的真相
47 0
JavaScript深入之bind的模拟实现
JavaScript深入系列第十一篇,通过bind函数的模拟实现,带大家真正了解bind的特性
44 0
JavaScript深入之new的模拟实现
JavaScript深入系列第十二篇,通过new的模拟实现,带大家揭开使用new获得构造函数实例的真相
37 0
多叉树结合JavaScript树形组件实现无限级树形结构(一种构建多级有序树形结构JSON(或XML)数据源的方法)
如何将数据库中的层次数据转换成对应的层次结构的JSON或XML格式的字符串,返回给客户端的JavaScript树形组件?这就是我们要解决的关键技术问题。
252 0
+关注
程序员诗人
一个会写诗的程序员
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础HTML入门教程》
立即下载
JS 语言在引擎级别的执行过程
立即下载
Python第五讲——关于爬虫如何做js逆向的思路
立即下载