Der's Blog

插件安装地址(请用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