一个简单的中文字符转unicode的chrome插件
展开/收缩插件安装地址(请用chrome打开): toUnicode.crx
12-7 更新增加了从unicode转字符,以及encode,decode等方便的功能
在通常的JS或CSS文件里,汉字等字符是以unicode的16进制形式存在的, 如果直接输入汉字,在英文或其他语种的系统上,容易造成乱码无法识别的状况,如果把所有汉字转成unicode形式就没有问题了,所以就想到做一个chrome小插件,随时查看汉字的unicode编码,
直接看下主转换代码:
/**
* 中文转unicode字符工具
*/
function toUnicode(str, cssType) {
var i = 0,
l = str.length,
result = [], //转换后的结果数组
unicodePrefix, //unicode前缀 (example:\1234||\u1234)
unicode16; //转换成16进制后的unicode
//如果是css中使用格式为\1234之类
unicodePrefix = (cssType && cssType.toLowerCase() === 'css') ? '\\' : '\\u';
for (; i < l; i++) {
//转为16进制的unicode, js及css里须转成16进制
unicode16 = str.charCodeAt(i).toString(16);
result.push( unicodePrefix + unicode16 );
}
return result.join(' ');
}
字符串的charCodeAt方法返回的是10进制的unicode,所以我们需要用toString(16)将其转为16进制的,才能在JS及CSS中使用,而CSS中跟JS不同的是少了个U。
再来看下页面上的调用 :
/**
* excute
*/
var input = document.getElementById('input'),
convert = document.getElementById('convert'),
CSSResult = document.getElementById('resultCSSType'),
JSResult = document.getElementById('resultJSType'),
msg = document.getElementById('msg');
//事件处理
function convertStr(e) {
var v = input.value;
//管理事件
switch (e.type) {
case 'click':
if (checkInput(v)) {
renderResult(v);
}
break;
case 'keydown':
if (e.keyCode === 13 && checkInput(v)) {
renderResult(v);
}
break;
}
//检测英文等字符排除
function checkInput(str) {
var charReg = /[^u0391-uFFE5]/g; //匹配英文等无需转换的字符
if (charReg.test(str)) {
msg.innerHTML = '输入字符格式有误,请输入中文等字符';
input.select();
input.focus();
renderResult('');
return false;
} else {
msg.innerHTML = '';
return true;
}
}
//渲染结果
function renderResult(str) {
JSResult.innerHTML = toUnicode(str);
CSSResult.innerHTML = toUnicode(str, 'css');
}
}
//bind事件
convert.addEventListener('click', convertStr, false);
input.addEventListener('keydown', convertStr, false);
input.addEventListener('blur', convertStr, false);
正则/[\u0391-\uFFE5]/是用来匹配中文字符,包括标点,繁体什么的。
再来就是生成chrome插件,chrome插件制作很简单,只需在chrome的扩展程序里导入你的项目文件 ,通常就是html+css+js文件即可,然后就可打包生成crx文件,可以在chrome上安装的插件了,(PS:具体的插件制作GG搜索下就有了)
本来想发布至chrome的webstore里,结果发布竟然还要收费 ,所以还是作罢,直接贴一下插件安装地址吧,请用chrome打开 toUnicode.crx
Der's Blog 
