title: HTML特殊字符转义
date: 2019-02-18 21:57:00
categories:
- tech
- language
- HTML
tags: [tech,HTML,SpecialCharacters,Java,JavaScript]
问题
如果HTML的DOM元素的属性值中含有特殊字符，会造成属性值取值错误。
例如：
<input type="button" value=" "name":"Tom" " id="test"/>
上面input的value属性值含有双引号,会造成最后解析到的value是空格。
解决方案
解决的办法就是对数据进行转义，转义成HTML特殊符号的转义字符。
常用的HTML特殊字符转义对照表：
| 字符 | 十进制 | 转义字符 |
|---|---|---|
| " | " |
" |
| & | & |
& |
| < | < |
< |
| > | > |
> |
| 不断开空格(non-breaking space) |   |
|
实现
通过Java转义：
org.apache.commons.lang3.StringEscapeUtils.escapeHtml4(com.alibaba.dubbo.common.json.Json.json(obj));
通过Js转义：
<span style="font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<body>
<input type="button" value="" id="test"/>
<SCRIPT LANGUAGE="JavaScript">
function htmlEscape(text){
return text.replace(/[<>"&]/g, function(match, pos, originalText){
switch(match){
case "<": return "<";
case ">":return ">";
case "&":return "&";
case "\"":return """;
}
});
}
var h=document.getElementsByTagName("input")[0];
h.value=htmlEscape("[{\"name\":\"A Girl\'s Guide\"}]");
</SCRIPT>
</body>
</HTML>
这样，就可以在HTML的标签中合法地使用特殊字符了。
当然，对于其他要求严格的格式（如XML,JSON,URL等），遇到特殊字符，也是通过转义实现的，小伙伴们可以自己尝试一下。
links:
author: ijiangtao.net
网友评论