问题
如果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:
- https://www.jianshu.com/p/fe23e6f31b54
- https://zhuanlan.zhihu.com/p/57064852
- https://juejin.im/post/5c6abd1a51882561de4aa1d0
