HTML、CSS、JS对unicode字符的不同处理
2016-09-11 10:59
274 查看
unicode字符的不同表示法
unicode字符在html、css和js中的表示方法均不相同,下面分别作介绍。原文发表于这里
css表示法
首先来一段很常见的bootstrap的字体图标代码:.glyphicon-home:before { content: "\e021"; }
上面代码中的
e021就是这个字符的unicode码,是16进制。
语法:
'\ + 16进制的unicode编码'
如:'\5b89'表示汉字“安”:
<div class="test"></div> <style> .test: before {content: "\e021";} </style>
js表示方法
语法:'\u + 16进制的unicode编码'
示例:
// 如:'\u5b89'表示汉字“安” console.log('\u5b89'); // 输出“安”
html表示方法
html特殊一点,使用的是10进制,一开始没注意这个搞的半天出不来郁闷很久。语法:
' + 10进制的unicode编码 + 英文分号;'
如
& #23433;(注意,由于正常书写的话发表之后会被转换成汉字,所以我这里故意中间留了空格防止转换)表示汉字
安,结尾的分号经测试不加也没问题,但是最好还是加一下。
<div> 这是unicode表示的字符“安”:& #23433;(这里故意留一空格防止转换) </div>
另外,一些特殊字符还有其它表示,也就是常说的
html转义字符,如(由于自动转换问题,这里用图片表示):
![](http://image.liuxianan.com/201609/20160911_105430_278_0934.png)
完整的HTML转义字符表可以参见这里:
http://tool.oschina.net/commons?type=2
获取汉字的unicode编码
那么,如何知道一个汉字的unicode的编码呢?很简单:'安'.charCodeAt(); // 输出的 23433 就是汉字 安 的unicode编码,不过注意是10进制的 String.fromCharCode(23433); // 输出 '安'
得到了10进制的unicode编码,再如果想在js和css里面用的话,就需要用
toString(16)转16进制再做进一步处理了。
var unicode = '\\u'+'茗'.charCodeAt().toString(16); // 输出字符串:"\u8317" JSON.parse('"'+unicode+'"'); // 输出汉字:"茗" eval('"'+unicode+'"'); // 或者使用eval解析也可以
相关文章推荐
- HTML、CSS、JS对unicode字符的不同处理
- HTML、CSS、JS对unicode字符的不同处理
- HTML特殊字符的html、js、css 写法unicode汇总
- spring mvc 处理html,css,js等静态文件
- 用Javascript(js)进行HTML转义工具(处理特殊字符显示)
- 用Javascript(js)进行HTML转义工具(处理特殊字符显示)
- 【HTML】通过不同的分辨率调用不同的css,两种方法:css本身判断、js调用css
- HTML特殊字符的html、js、css写法汇总
- html\css\js-dom在不同主流浏览器的兼容问题
- html特殊字符的html,js,css写法汇总
- HTML特殊字符的html、js、css写法汇总
- HTML特殊字符的html、js、css写法汇总
- Html+Css+Js_之table每隔3行显示不同的两种颜色
- HTML特殊字符的html、js、css写法汇总
- 处理字符串的一些js/jq方法(去除HTML,去除空格,计算真实长度,截取中英文字符)
- HTML特殊字符的html、js、css写法汇总
- HTML特殊字符的html、js、css写法汇总
- html特殊字符的html,js,css写法汇总
- unicode字符集特殊符号对应html/js/css符号
- HTML、JS、CSS之特殊字符