CSSASS » unicode http://www.cssass.com/blog 三人行必有我师焉，择其善者而从之，其不善者而改之 Wed, 08 Sep 2010 05:41:09 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 JS实现字符unicode编码信息查询 http://www.cssass.com/blog/index.php/2009/306.html http://www.cssass.com/blog/index.php/2009/306.html#comments Sat, 02 May 2009 15:31:57 +0000 ONEBOYS http://www.cssass.com/blog/?p=306
  • 元素的拖动效果 先看一下普通的拖动元素的代码 <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>简单拖曳</title> <style...
  • 搭建pligg的注意事项和几个程序修改       新弄了一个digg类站：cssass的分享       digg类程序以前有玩过国产的wodig，那是在其第三季的时候，那时bug很多，自己还给官方贡献过几个bug修改方法呢。弄了一段时间后，就被遗弃了。  ...
  • input(button)的空隙 按钮中的文字和边缘都是有一段默认距离的： <input type="submit" value="提交提交提交" /><br /> <button type="submit" value="提交提交提交" >提交提交提交</button>...
    • ]]>        这两天在xiaonei的个人状态里看见很多人添加有一些特殊字符，如҉ (据说叫菊花，囧nz)。当然这种字符也还没什么稀奇，这个符号是cyrillic里百万的标识。另外有见到一个能将文字反排显示的不可见字符,比较有趣。如下：

       此RLO字符的效果就是将文字反排（效果有点类似<bdo dir=rtl>啊。参见：HTML的dir属性和<bdo>标签及其他一些CSS文字排版属性、滤镜 不过bdo这个是需要浏览器解释后才能看见效果的，而此RLO不需要浏览器解释，当然上面代码里使用的是html字符实体编号,这个是需要浏览器解释的。）

       在UCS（Unicode Character Set）当中，每个字符都有一个unicode编码——不过，拥有unicode码的不一定是字符，也可以是设备控制符。
       应该说，很多形式的字符编码都是基于unicode编码的，如URL-encode,ASCll码,HTML Character Entities编号。特别是HTML Character Entities编号，与unicode可以说是一一对应的，只要浏览器支持，charset包含，“&#”+十进制标号+“；”的编码就能在html中使用所有unicode中定义字符。
       以上面的RLO字符分析，虽然RLO符看不见，但也是可以被copy的，而且，必然的有一个对应的unicode码。RLO的unicode对应的16进制编号是：202e。转成10进制就是：8238。所以如果要在html中使用这个字符，除了copy这个字符过来外，我们可以使用字符实体编号：&#+8238+;(不包括+号)。
    关于如何查到某个字符的unicode编码，每种程序语言应该都有函数可以用来解码为unicode，这里有一个php的解码应用：convert-to-html。这是直接解成html实体编码的。它同unicode的关系只是十进制与十六进制的关系（实质是一样的）。要看16进制unicode只需做下进制转码就行了。知道了16进制编码，我们就可以在这里查询字符的信息：unicode.org

    下面是自己用js写的转码工具：

    可以解开任意字符的unicode码，并生成字符实体码，而且可以链接到unicode官网查询该字符的信息。
    js中escape这个函数能直接将字符串转成unicode码，不过有部分属于ASCll编码的字符不会解开。
    而charCodeAt函数则能解开任何字符的unicode码。
    我在js中两种方法都用了。
    JS中解码的函数还有encodeURI——这个解开的unicode码我们会经常看见，地址栏里的字符串即出自于此。

    转码函数的主要内容。——写的有点乱，不合理处肯定很多。

    1. function escapeCode(){
    2.     var hexArray=new Array();
    3.     var decArray=new Array();
    4.     var entiArray=new Array();
    5.     var decCode;
    6.     var inTXT=getId('inputValue').value;
    7.     var outTXT='';
    8.     var entityCode='';
    9.     var outList="<ul><li>Unicode Character Code编码</li><li>HTML Character Entities编号</li><li>字符显示</li><li>unicode信息查询</li></ul>";
    10.  
    11.     if(getId('convAll').checked){  //true,转换a-z,A-Z等字符的unicode编码
    12.       var character;
    13.       for(i=0;i<inTXT.length;i++){
    14.         character=inTXT.charCodeAt(i).toString(16).toUpperCase();   //法1：使用charCodeAt逐字转码
    15.         outTXT+='u'+character+' ';
    16.         hexArray.push(character);
    17.        }
    18.     }
    19.     else{
    20.     outTXT=escape(inTXT);               //法2：使用escape直接转码（不转a-z,A-Z等字符）
    21.     hexArray=outTXT.split(/%u|%/);  //以%u和%做分割插入数组
    22.     }
    23.  
    24.     for(i in hexArray){
    25.         if(hexArray[i]=='') hexArray.splice(i,1); //清除空的数组项（FF）
    26.         hexArray[i]=hexArray[i].slice(0,4);     //截取数组项中前四个字符。（消除a-z,A-Z等不解码产生的影响）
    27.         decCode=parseInt(hexArray[i],16).toString(10);
    28.         decArray.push(decCode);
    29.         entityCode+='&#'+decCode+'; ';
    30.         outList+="<ul><li>"+hexArray[i]+"</li><li>"+decArray[i]+"</li><li>\"&#"+decCode+";\"</li>";
    31.         outList+="<li><form enctype='application/x-www-form-urlencoded' action='http://www.unicode.org/cgi-bin/Code2Chart.pl' method='post' target='_blank'>";
    32.         outList+="<input type='hidden'  maxlength='8' size='8' name='HexCode' value="+hexArray[i]+" />";
    33.         outList+="<input type='submit' value='Go' name='submit'/></form></li></ul>";
    34.     }
    35.         getId('outUnicode').value=outTXT;   //输出unicode码，以%u或%开头。
    36.         getId('outEnticode').value=entityCode;  //输出字符实体编码
    37.         getId('outView').innerHTML=outList;  //输出编码值，并有unicode信息查询链接。
    38.      }

    Related posts:

    1. 元素的拖动效果 先看一下普通的拖动元素的代码 <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>简单拖曳</title> <style...
    2. 搭建pligg的注意事项和几个程序修改       新弄了一个digg类站：cssass的分享       digg类程序以前有玩过国产的wodig，那是在其第三季的时候，那时bug很多，自己还给官方贡献过几个bug修改方法呢。弄了一段时间后，就被遗弃了。  ...
    3. input(button)的空隙 按钮中的文字和边缘都是有一段默认距离的： <input type="submit" value="提交提交提交" /><br /> <button type="submit" value="提交提交提交" >提交提交提交</button>...

    ]]>     http://www.cssass.com/blog/index.php/2009/306.html/feed 0