`

HTML、JS、JSON特殊字符

阅读更多

JS到HTML特殊字符转换

这几天做项目,发现从服务器端以JSON格式将数据传递到客户端后,通过JS显示在HTML页面时,有一些特殊字符不能直接显示,如后台传递过来的是 '<b>msg</b>&nbsp;&#35;' 通过JS显示在HTML页面中时,显示成了 msg # ,并不是<b>msg</b>&nbsp;&#35;,这是由于<与>之间的内容看作是HTML标签了,而以&开头的&nbsp;&#35;为HTML实体,所以显示不正常。

 

解决办法很简单,在JS将其渲染到HTML页面前转换一下即可:

 

 

<html>
<body>
<div id="div1" ></div>
<div id="div2" ></div>
<script >
var str = '<b>msg</b>&nbsp;&#35;';
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,'&#60;');
					break;
				case '>':
					strArr.splice(i,1,'&#62;');
					break;
				case '&':
					strArr.splice(i,1,'&#38;');
			}
		}
	}
	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("&", "&#38;");		
		HTML_CHAR.put("\"", "&#34;");
		HTML_CHAR.put("<", "&#60;");
		HTML_CHAR.put(">", "&#62;");	
		HTML_CHAR.put("'", "&#39;");		
	}

	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
分享到:
评论
1 楼 daofeng1983 2012-12-25  
感觉还不错,学习下。

相关推荐

    PHP语言基础知识详解及常见功能应用.docx

    本文详细介绍了PHP的基本语法、变量类型、运算符号以及文件上传和发邮件功能的实现方法,适合初学者了解和掌握PHP的基础知识。

    公司金融课程期末考试题目

    公司金融整理的word文档

    适用于 Python 应用程序的 Prometheus 检测库.zip

    Prometheus Python客户端Prometheus的官方 Python 客户端。安装pip install prometheus-client这个包可以在PyPI上找到。文档文档可在https://prometheus.github.io/client_python上找到。链接发布发布页面显示项目的历史记录并充当变更日志。吡啶甲酸

    DFC力控系统维护及使用

    DFC力控系统维护及使用

    Spring Data的书籍项目,含多数据库相关内容.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    2019-2023GESP,CSP,NOIP真题.zip

    2019-2023GESP,CSP,NOIP真题.zip

    基于 Gin + Element 实现的春联生成平台

    博文链接 https://blog.csdn.net/weixin_47560078/article/details/127712877?spm=1001.2014.3001.5502

    zetero7实测可用插件

    包含: 1、jasminum茉莉花 2、zotero-style 3、greenfrog 4、zotero-reference 5、translate-for-zotero 用法参考:https://zhuanlan.zhihu.com/p/674602898

    简单的 WSN 动画制作器 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    毕业设计&课设_仿知乎社区问答类 App 项目:吉林大学毕业设计,含代码、截图及相关说明.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    python技巧学习.zip

    python技巧学习.zip

    2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析

    2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析 完整代码

    life-expectancy-table.json

    echarts 折线图数据源文件

    此扩展现在由 Microsoft fork 维护 .zip

    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最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务

    Centos6.x通过RPM包升级OpenSSH9.7最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务

    5 总体设计.pptx

    5 总体设计.pptx

    用于执行 RPA 的 Python 包.zip

    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

    原生js识别手机端或电脑端访问代码.zip

    极速浏览器(超快速运行)

    浏览器

    基于SpringBoot和Vue的旅游可视化系统设计与实现

    内容概要:本文介绍了基于Spring Boot和Vue开发的旅游可视化系统的设计与实现。该系统集成了用户管理、景点信息、路线规划、酒店预订等功能,通过智能算法根据用户偏好推荐景点和路线,提供旅游攻略和管理员后台,支持B/S架构,使用Java语言和MySQL数据库,提高了系统的扩展性和维护性。 适合人群:具有一定编程基础的技术人员,特别是熟悉Spring Boot和Vue框架的研发人员。 使用场景及目标:适用于旅游行业,为企业提供一个高效的旅游推荐平台,帮助用户快速找到合适的旅游信息和推荐路线,提升用户旅游体验。系统的智能化设计能够满足用户多样化的需求,提高旅游企业的客户满意度和市场竞争力。 其他说明:系统采用现代化的前后端分离架构,具备良好的可扩展性和维护性,适合在旅游行业中推广应用。开发过程中需要注意系统的安全性、稳定性和用户体验。

Global site tag (gtag.js) - Google Analytics