root/lang/javascript/UnicodeNormalizer/index.html

Revision 13308, 5.0 kB (checked in by matsuza, 6 years ago)

changed property; svn:mime-type

  • Property svn:mime-type set to text/html; charset=UTF-8
  • Property svn:keywords set to
    Revision
    Date
Line 
1<html>
2<head>
3<meta http-equiv="Content-type" content="text/html; charset=utf-8">
4<script charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
5<script charset="utf-8" src="unorm.js"></script>
6<script charset="utf-8" src="unormdata.js"></script>
7</head>
8<body>
9
10
11<h1>Unicode Normalizer</h1>
12author; matsuza (matsuza gmail.com, <a href="http://d.hatena.ne.jp/matsuza">http://d.hatena.ne.jp/matsuza</a>)<p>
13Unicode規格で規定されているNormalize処理を行います。<br>
14<a href="http://unicode.org/reports/tr15/">UAX #15: Unicode Normalization Forms:</a><br>
15Unicode.orgで提供されているテストケースに準拠しています。
16<br>
17MITとGPLのデュアルライセンスとします。
18
19<script>
20function onchangesample(e){
21 var t = e.srcElement ? e.srcElement.value : e.target.value;
22 var tgt = [[UNorm.nfd, "#nfd"], [UNorm.nfkd, "#nfkd"], [UNorm.nfc, "#nfc"], [UNorm.nfkc, "#nfkc"]];
23 for(var i = 0; i < tgt.length; ++i){
24  var cnvd = tgt[i][0](t);
25  $(tgt[i][1] + "_res")[0].value = cnvd;
26  $(tgt[i][1] + "_esc")[0].innerHTML = (function(str){
27         var ret = "";
28         for(var i = 0; i < str.length; ++i){
29            ret +="&amp;#x" + str.charCodeAt(i).toString(16) + ";";
30         }
31         return ret;
32      })(cnvd);
33  $(tgt[i][1] + "_len")[0].innerHTML = cnvd.length;
34 }
35}
36</script>
37<style>
38
39</style>
40
41<h2>デモ</h2>
42↓に何か文字列を入れると、NFD, NFKD, NFC, NFKCの各モードでノーマライズした結果が表示されます。<br>
43入れると面白い文字列一覧 ; ㈱㍍ガガ①&#xAC00;&#519;<br>
44文字列長や、delキーで文字を削除するときの振る舞いなんか面白いかも知れません。<br>
45
46
47<textarea name="sample" id="sample" onkeyup="onchangesample(event);"></textarea>
48<br>
49<div>
50NFD(length=<span id="nfd_len"></span>)<br>
51<textarea id="nfd_res" class="ntest"></textarea>
52<div id="nfd_esc" class="esc"></div>
53</div>
54<div>
55NFKD(length=<span id="nfkd_len"></span>)<br>
56<textarea id="nfkd_res" class="ntest"></textarea>
57<div id="nfkd_esc" class="esc"></div>
58</div>
59<div>
60NFC(length=<span id="nfc_len"></span>)<br>
61<textarea id="nfc_res" class="ntest"></textarea>
62<div id="nfc_esc" class="esc"></div>
63</div>
64<div>
65NFKC(length=<span id="nfkc_len"></span>)<br>
66<textarea id="nfkc_res" class="ntest"></textarea>
67<div id="nfkc_esc" class="esc"></div>
68</div>
69
70<h2>利用方法</h2>
71<h3>読み込み方法</h3>
72unorm.jsとunormdata.jsを、この順に読み込んでください。
73<h3>名前空間</h3>
74UNorm名前空間を利用します。以下の説明ではこの名前空間が暗黙的に使われているものとします。
75<h3>API</h3>
76
77<h4>normalize(mode, str)</h4>
78ノーマライズを行います。
79<h5>引数</h5>
80<ul>
81<li>mode : ノーマライズのモードを指定します。"NFD", "NFKD", "NFC", "NFKC"が指定できます。
82<li>str : ノーマライズ処理を行う対象のStringです。
83<li>返値 : String
84</ul>
85<h5>備考</h5>
86ノーマライズはそれなりに重い処理なので、大きな文字列を処理する場合は後述するイテレータインタフェースを用いて適度にsetTimeout()することを推奨します。<br>
87<h5>サンプル</h5>
88<pre>
89var s = "㈱㍍";
90document.write(UNorm.normalize("NFKC", s));
91</pre>
92
93<h4>nfd(str)</h4>
94<h4>nfkd(str)</h4>
95<h4>nfc(str)</h4>
96<h4>nfkc(str)</h4>
97関数名に示される種類のノーマライズを行います。
98nfd(str)はnormalize("NFD", str)と厳密に等価です。
99<h5>引数</h5>
100<ul>
101<li>str : ノーマライズ処理を行う対象のStringです。
102<li>返値 : String
103</ul>
104<h5>サンプル</h5>
105<pre>
106var s = "㈱㍍";
107document.write(UNorm.nfkc(s));
108</pre>
109
110<h4>createIterator(mode, str)</h4>
111ノーマライザのイテレータインタフェースを返します。
112<h5>引数</h5>
113<ul>
114<li>mode : ノーマライズのモードを指定します。"NFD", "NFKD", "NFC", "NFKC"が指定できます。
115<li>str : ノーマライズ処理を行う対象のStringです。
116<li>返値 : イテレータを返します。
117</ul>
118<h5>備考</h5>
119返値はイテレータオブジェクトです。<br>
120ノーマライズ処理を行う際、簡便なのはnormalize関数を使って処理することですが、巨大な文字列を処理する場合はイテレータインタフェースを使うことも考慮してください。<br>
121イテレータオブジェクトはnext()メソッドを備えており、next()を呼ぶたびにUCharオブジェクトを返します。返すべきデータが無くなった以降は、next()を呼ぶたびにnullが帰ります。<br>
122UCharオブジェクトはtoString()を備えており、これを用いて文字列に変換できます。<br>
123<h5>サンプル</h5>
124<pre>
125var it = createIterator("NFC", "①ガギグゲゴ");
126var ret = "";
127var uchar;
128while(!!(uchar = it.next())){
129        ret += uchar.toString();
130}
131document.write(ret);
132</pre>
133</body>
Note: See TracBrowser for help on using the browser.