JS到HTML特殊字符转换
这几天做项目,发现从服务器端以JSON格式将数据传递到客户端后,通过JS显示在HTML页面时,有一些特殊字符不能直接显示,如后台传递过来的是 '<b>msg</b> #' 通过JS显示在HTML页面中时,显示成了 msg # ,并不是<b>msg</b> #,这是由于<与>之间的内容看作是HTML标签了,而以&开头的 与#为HTML实体,所以显示不正常。
解决办法很简单,在JS将其渲染到HTML页面前转换一下即可:
<html>
<body>
<div id="div1" ></div>
<div id="div2" ></div>
<script >
var str = '<b>msg</b> #';
document.all.div1.innerHTML='<pre>'+str+'</pre>';
//js中的字符串正常显示在HTML页面中
String.prototype.displayHtml= function(){
//将字符串转换成数组
var strArr = this.split('');
//HTML页面特殊字符显示,空格本质不是,但多个空格时浏览器默认只显示一个,所以替换
var htmlChar="&<>";
for(var i = 0; i< str.length;i++){
//查找是否含有特殊的HTML字符
if(htmlChar.indexOf(str.charAt(i)) !=-1){
//如果存在,则将它们转换成对应的HTML实体
switch (str.charAt(i)) {
case '<':
strArr.splice(i,1,'<');
break;
case '>':
strArr.splice(i,1,'>');
break;
case '&':
strArr.splice(i,1,'&');
}
}
}
return strArr.join('');
}
alert(str.displayHtml());
document.all.div2.innerHTML=str.displayHtml();
</script>
</body>
</html>
上面在赋给div之前没有转换,所以显示不正常,第二个div显示正常,显示结果如下:
JSP到HTML特殊字符转换
以上是通过JS将后台传递过来的数据显示在页面之前的转换,有时是通过JSP生成HTML页面内容,此时的特殊字符会比上面多,另外此时的转换需要通过服务器端转换后再输出到HTML页面。如 jsp页面在生成HTML时如下:
<input type='txt' value='<%=msg %>'>
如果 msg 为
I'am> 时,第一页面会乱,第二文本框中显示的值不正确
。这是由于HTML标签属性值可以使用双引号也可使用单引号,如果HTML使用的是单引号,而值中也包含单引号时,就会出现问题,双引号同样也有这样的问题,由于大都数情况下,页面中属性使用双引号还是单引号没有规范下来,所以服务器端传递来的单引号与双引号都需要转换。另外像<、>就不用说了,也是需要转换的,所以此种情况下应该至少
<>"'& 这5个需要特殊转换。
// HTML字符转换表
public final static Map<String, String> HTML_CHAR = new HashMap<String, String>();
static {
HTML_CHAR.put("&", "&");
HTML_CHAR.put("\"", """);
HTML_CHAR.put("<", "<");
HTML_CHAR.put(">", ">");
HTML_CHAR.put("'", "'");
}
public static final StringBuilder toHTMLChar(String str) {
if (str == null) {
return new StringBuilder();
}
StringBuilder sb = new StringBuilder(str);
char tempChar;
String tempStr;
for (int i = 0; i < sb.length(); i++) {
tempChar = sb.charAt(i);
if (HTML_CHAR.containsKey(Character.toString(tempChar))) {
tempStr = (String) HTML_CHAR.get(Character
.toString(tempChar));
sb.replace(i, i + 1, tempStr);
i += tempStr.length() - 1;
}
}
return sb;
}
在输出到HTML之前使用上面的toHTMLChar(msg).toString()转换一下即可:
Java到JSON特殊字符转换
由于从服务器后端生成JSON格式的字符串,最后传递到客户端由 eval() 函数动态的生成Javascript,如果JSON字符串格式错误,则eval解析会出错,经常也是最常出错的是 " ' \r\n 这三个字符,如 {name:'I'am'}解析时会出错,同样,由于JavaScript中的字符串可由单引号也可由双引号引起来,所以双引号一样也有这样问题。另外,字符串是不能跨行写的,即你不能写成这样:{name:"I'
am"}
所以这3个需要转换,另外换行可能依赖于平台,所以 \n 也需要转换,比如我们需要将后台抛出的异常栈信息以JSON的格式传回到浏览器上显示时,就需要将回车换行转换。代码如下:
response.setContentType("application/json");
Writer wr = response.getWriter();
if(exceptionTrace.indexOf("'")!=-1){
//将单引号转义一下,因为JSON串中的字符串类型可以单引号引起来的
exceptionTrace = exceptionTrace.replaceAll("'", "\\'");
}
if(exceptionTrace.indexOf("\"")!=-1){
//将双引号转义一下,因为JSON串中的字符串类型可以单引号引起来的
exceptionTrace = exceptionTrace.replaceAll("\"", "\\\"");
}
if(exceptionTrace.indexOf("\r\n")!=-1){
//将回车换行转换一下,因为JSON串中字符串不能出现显式的回车换行
exceptionTrace = exceptionTrace.replaceAll("\r\n", "\\u000d\\u000a");
}
if(exceptionTrace.indexOf("\n")!=-1){
//将换行转换一下,因为JSON串中字符串不能出现显式的换行
exceptionTrace = exceptionTrace.replaceAll("\n", "\\u000a");
}
wr.write("{success:false,exception:true,msg:'" +exceptionTrace + "'}");
wr.flush();
wr.close();
- 大小: 2.9 KB
- 大小: 1.6 KB
- 大小: 1.8 KB
分享到:
相关推荐
本文详细介绍了PHP的基本语法、变量类型、运算符号以及文件上传和发邮件功能的实现方法,适合初学者了解和掌握PHP的基础知识。
公司金融整理的word文档
Prometheus Python客户端Prometheus的官方 Python 客户端。安装pip install prometheus-client这个包可以在PyPI上找到。文档文档可在https://prometheus.github.io/client_python上找到。链接发布发布页面显示项目的历史记录并充当变更日志。吡啶甲酸
DFC力控系统维护及使用
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
2019-2023GESP,CSP,NOIP真题.zip
博文链接 https://blog.csdn.net/weixin_47560078/article/details/127712877?spm=1001.2014.3001.5502
包含: 1、jasminum茉莉花 2、zotero-style 3、greenfrog 4、zotero-reference 5、translate-for-zotero 用法参考:https://zhuanlan.zhihu.com/p/674602898
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
python技巧学习.zip
2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析 完整代码
echarts 折线图数据源文件
Visual Studio Code 的 Python 扩展Visual Studio Code 扩展对Python 语言提供了丰富的支持(针对所有积极支持的 Python 版本),为扩展提供了访问点,以无缝集成并提供对 IntelliSense(Pylance)、调试(Python 调试器)、格式化、linting、代码导航、重构、变量资源管理器、测试资源管理器等的支持!支持vscode.devPython 扩展在vscode.dev (包括github.dev )上运行时确实提供了一些支持。这包括编辑器中打开文件的部分 IntelliSense。已安装的扩展Python 扩展将默认自动安装以下扩展,以在 VS Code 中提供最佳的 Python 开发体验Pylance - 提供高性能 Python 语言支持Python 调试器- 使用 debugpy 提供无缝调试体验这些扩展是可选依赖项,这意味着如果无法安装,Python 扩展仍将保持完全功能。可以禁用或卸载这些扩展中的任何一个或全部,但会牺牲一些功能。通过市场安装的扩展受市场使用条款的约束。可
Centos6.x通过RPM包升级OpenSSH9.7最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务
5 总体设计.pptx
Python 版 RPAv1.50 • 使用案例• API 参考 • 关于 和制作人员 • 试用云 • PyCon 视频 • Telegram 聊天 • 中文 • हिन्दी • 西班牙语 • 法语 • বাংলা • Русский • 葡萄牙语 • 印尼语 • 德语 • 更多..要为 RPA(机器人流程自动化)安装此 Python 包 -pip install rpa要在 Jupyter 笔记本、Python 脚本或交互式 shell 中使用它 -import rpa as r有关操作系统和可选可视化自动化模式的说明 -️ Windows -如果视觉自动化有故障,请尝试将显示缩放级别设置为推荐的 % 或 100% macOS -由于安全性更加严格,请手动安装 PHP并查看PhantomJS和Java 弹出窗口的解决方案 Linux -视觉自动化模式需要在 Linux 上进行特殊设置,请参阅如何安装 OpenCV 和 Tesseract Raspberry Pi - 使用此设置指南在 Raspberry Pies(低成本自
原生js识别手机端或电脑端访问代码.zip
浏览器
内容概要:本文介绍了基于Spring Boot和Vue开发的旅游可视化系统的设计与实现。该系统集成了用户管理、景点信息、路线规划、酒店预订等功能,通过智能算法根据用户偏好推荐景点和路线,提供旅游攻略和管理员后台,支持B/S架构,使用Java语言和MySQL数据库,提高了系统的扩展性和维护性。 适合人群:具有一定编程基础的技术人员,特别是熟悉Spring Boot和Vue框架的研发人员。 使用场景及目标:适用于旅游行业,为企业提供一个高效的旅游推荐平台,帮助用户快速找到合适的旅游信息和推荐路线,提升用户旅游体验。系统的智能化设计能够满足用户多样化的需求,提高旅游企业的客户满意度和市场竞争力。 其他说明:系统采用现代化的前后端分离架构,具备良好的可扩展性和维护性,适合在旅游行业中推广应用。开发过程中需要注意系统的安全性、稳定性和用户体验。