全角英字、半角カナ変換(Halfwidth and Fullwidth Forms)

概要:
ユニコードの Halfwidth and Fullwidth Forms[UFF00-UFFEF](全角英字、半角カナなど)を変換する。
  • ASCII範囲の記号を含む全角英数字を半角へ
  • 半角カナを全角カナへ
  • 半角記号[UFF5F, UFF60, UFFE8-UFFEE](⦅⦆│←↑→↓■○)を全角へ
  • TODO: 全角記号[UFFE0-UFFE6](¢£¬ ̄¦¥₩)
  • TODO: [UFFA1-UFFDC](Korean)

デモ


JavaScript (unicode.hfwidth.js)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
(function(window) {
  'use strict';

  // Halfwidth and Fullwidth Forms
  // Unicode Consortium (Halfwidth and Fullwidth Forms) <http://www.unicode.org/charts/PDF/UFF00.pdf>
  // TODO: FFA1-FFDC(Korean)
  window.hfwidth = {
    // Unicode Consortium (C0 Controls and Basic Latin) <http://www.unicode.org/charts/PDF/U0000.pdf>
    ascii: function(text) { //< Fullwidth to Halfwidth
      return text.replace(/[!-~]/g, function(match) {
        return String.fromCharCode(match.charCodeAt(0) - 0xFEE0);
      });
    },
    // Unicode Consortium (Katakana) <http://www.unicode.org/charts/PDF/U30A0.pdf>
    kana: function(text) { //< Halfwidth to Fullwidth
      return text.replace(/([\uFF8A-\uFF8E])([゚゙])/g, function(match, p1, p2) {
        return {'゚': 'パピプペポ', '゙': 'バビブベボ'}[p2][p1.charCodeAt(0) - 0xFF8A];
      }).replace(/([\uFF66\uFF76-\uFF84\uFF73\uFF9C])゙/g, function(match, p1) {
        switch (p1) {
          case '\uFF66': return 'ヺ';
          case '\uFF73': return 'ヴ';
          case '\uFF9C': return 'ヷ';
          default: return 'ガギグゲゴザジズゼゾダヂヅデド'[p1.charCodeAt(0) - 0xFF76];
        }
      }).replace(/([\uFF61-\uFF9F])/g, function(match, p1) {
        return '。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン゛゜'[p1.charCodeAt(0) - 0xFF61];
      });
    },
    mark: function(text) {
      //return text.replace(/([\uFFE0-\uFFE6])/g, function(match, p1) { //< TODO: Fullwidth to Halfwidth
      //  return '¢£¬ ̄¦¥₩'[p1.charCodeAt(0) - 0xFFE0];
      //})
      return text.replace(/([\uFFE8-\uFFEE])/g, function(match, p1) { //< Halfwidth to Fullwidth
        // Unicode Consortium (Arrows) <http://www.unicode.org/charts/PDF/U2190.pdf>
        // Unicode Consortium (Geometric Shapes) <http://www.unicode.org/charts/PDF/U25A0.pdf>
        return '|←↑→↓■○'[p1.charCodeAt(0) - 0xFFE8];
      }).replace(/⦅/g, '((').replace(/⦆/g, '))');
    }
  }
})(this);

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Halfwidth and Fullwidth Forms</title>
  </head>
  <body>
    <div>
      Text:<input id="text" type="text" class="test" /><br>
      <textarea id="textarea"></textarea><br>
      <button id="exec">半角全角変換</button>
    </div>
    <script src="unicode.hfwidth.js"></script>
    <script>
      (function(window, document) {
        'use strict';

        // $.on
        function onByElement(element, type, eventHandle) {
          if (document.addEventListener) {
            element.addEventListener(type, eventHandle, false);
          } else if (document.attachEvent) {
            element.attachEvent('on' + type, eventHandle);
          }
        }

        // ロード時の処理
        function ready() {
          var elementIds = ['text', 'textarea'];
          // 実行ボタン押下時の処理
          onByElement(document.getElementById('exec'), 'click', function() {
            for (var i = 0, l = elementIds.length; i < l; ++i) {
              var element = document.getElementById(elementIds[i]);
              // 変換実行
              var text = window.hfwidth.ascii(element.value);
              text = window.hfwidth.kana(text);
              text = window.hfwidth.mark(text);
              if (text !== element.value) {
                element.value = text;
              }
            }
          });
        }

        // $.ready
        if (document.addEventListener) {
          document.addEventListener('DOMContentLoaded', ready, false);
          window.addEventListener('load', ready, false);
        } else if (document.attachEvent) {
          // If IE event model is used
          document.attachEvent('onreadystatechange', ready);
          window.attachEvent('onload', ready);
        } else {
          console.log('unknown event model.');
        }
      })(typeof window !== 'undefined' ? window : this, document);
    </script>
  </body>
</html>