CSSASSCSSASSCSSASS

三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

文章关键字 ‘html character entities’

JS实现字符unicode编码信息查询

2009年05月2号,星期六

   这两天在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.      }