JavaScript で半角⇔全角に変換するには？

/ ツール / By
ショコラ
ショコラ

JavaScript で半角⇔全角に変換するには？

昔作った JavaScript の半角⇔全角変換テーブル（ソースの henkan_table変数）。
このまま腐らせるのももったいなので HTA でサンプルプログラムを作ってみました。

もっさん先輩
もっさん先輩

こちらのリンクを右クリックしてファイルをダウンロードできます。

https://answorz.com/5086/henkan.hta

スクリプトの説明

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>半角全角変換</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
<hta:application id="hta"/>
<script>
var henkan_table = {
'ｳﾞ' :'ヴ',
'ｶﾞ' :'ガ',
'ｷﾞ' :'ギ',
'ｸﾞ' :'グ',
'ｹﾞ' :'ゲ',
'ｺﾞ' :'ゴ',
'ｻﾞ' :'ザ',
'ｼﾞ' :'ジ',
'ｽﾞ' :'ズ',
'ｾﾞ' :'ゼ',
'ｿﾞ' :'ゾ',
'ﾀﾞ' :'ダ',
'ﾁﾞ' :'ヂ',
'ﾂﾞ' :'ヅ',
'ﾃﾞ' :'デ',
'ﾄﾞ' :'ド',
'ﾊﾞ' :'バ',
'ﾊﾟ' :'パ',
'ﾋﾞ' :'ビ',
'ﾋﾟ' :'ピ',
'ﾌﾞ' :'ブ',
'ﾌﾟ' :'プ',
'ﾍﾞ' :'ベ',
'ﾍﾟ' :'ペ',
'ﾎﾞ' :'ボ',
'ﾎﾟ' :'ポ',
' '  :'　',
'!'  :'！',
'#'  :'＃',
'$'  :'＄',
'%'  :'％',
'&'  :'＆',
'('  :'（',
')'  :'）',
'*'  :'＊',
'+'  :'＋',
','  :'，',
'-'  :'－',
'.'  :'．',
'/'  :'／',
'0'  :'０',
'1'  :'１',
'2'  :'２',
'3'  :'３',
'4'  :'４',
'5'  :'５',
'6'  :'６',
'7'  :'７',
'8'  :'８',
'9'  :'９',
':'  :'：',
';'  :'；',
'<'  :'＜',
'='  :'＝',
'>'  :'＞',
'?'  :'？',
'@'  :'＠',
'A'  :'Ａ',
'B'  :'Ｂ',
'C'  :'Ｃ',
'D'  :'Ｄ',
'E'  :'Ｅ',
'F'  :'Ｆ',
'G'  :'Ｇ',
'H'  :'Ｈ',
'I'  :'Ｉ',
'J'  :'Ｊ',
'K'  :'Ｋ',
'L'  :'Ｌ',
'M'  :'Ｍ',
'N'  :'Ｎ',
'O'  :'Ｏ',
'P'  :'Ｐ',
'Q'  :'Ｑ',
'R'  :'Ｒ',
'S'  :'Ｓ',
'T'  :'Ｔ',
'U'  :'Ｕ',
'V'  :'Ｖ',
'W'  :'Ｗ',
'X'  :'Ｘ',
'Y'  :'Ｙ',
'Z'  :'Ｚ',
'['  :'［',
'"'  :'”',
'\'' :'’',
'\\' :'￥',
']'  :'］',
'^'  :'＾',
'_'  :'＿',
'`'  :'‘',
'a'  :'ａ',
'b'  :'ｂ',
'c'  :'ｃ',
'd'  :'ｄ',
'e'  :'ｅ',
'f'  :'ｆ',
'g'  :'ｇ',
'h'  :'ｈ',
'i'  :'ｉ',
'j'  :'ｊ',
'k'  :'ｋ',
'l'  :'ｌ',
'm'  :'ｍ',
'n'  :'ｎ',
'o'  :'ｏ',
'p'  :'ｐ',
'q'  :'ｑ',
'r'  :'ｒ',
's'  :'ｓ',
't'  :'ｔ',
'u'  :'ｕ',
'v'  :'ｖ',
'w'  :'ｗ',
'x'  :'ｘ',
'y'  :'ｙ',
'z'  :'ｚ',
'{'  :'｛',
'|'  :'｜',
'}'  :'｝',
'~'  :'～',
'｡'  :'。',
'｢'  :'「',
'｣'  :'」',
'､'  :'、',
'･'  :'・',
'ｦ'  :'ヲ',
'ｧ'  :'ァ',
'ｨ'  :'ィ',
'ｩ'  :'ゥ',
'ｪ'  :'ェ',
'ｫ'  :'ォ',
'ｬ'  :'ャ',
'ｭ'  :'ュ',
'ｮ'  :'ョ',
'ｯ'  :'ッ',
'ｰ'  :'ー',
'ｱ'  :'ア',
'ｲ'  :'イ',
'ｳ'  :'ウ',
'ｴ'  :'エ',
'ｵ'  :'オ',
'ｶ'  :'カ',
'ｶ'  :'ヵ',
'ｷ'  :'キ',
'ｸ'  :'ク',
'ｹ'  :'ヶ',
'ｹ'  :'ケ',
'ｺ'  :'コ',
'ｻ'  :'サ',
'ｼ'  :'シ',
'ｽ'  :'ス',
'ｾ'  :'セ',
'ｿ'  :'ソ',
'ﾀ'  :'タ',
'ﾁ'  :'チ',
'ﾂ'  :'ツ',
'ﾃ'  :'テ',
'ﾄ'  :'ト',
'ﾅ'  :'ナ',
'ﾆ'  :'ニ',
'ﾇ'  :'ヌ',
'ﾈ'  :'ネ',
'ﾉ'  :'ノ',
'ﾊ'  :'ハ',
'ﾋ'  :'ヒ',
'ﾌ'  :'フ',
'ﾍ'  :'ヘ',
'ﾎ'  :'ホ',
'ﾏ'  :'マ',
'ﾐ'  :'ミ',
'ﾑ'  :'ム',
'ﾒ'  :'メ',
'ﾓ'  :'モ',
'ﾔ'  :'ヤ',
'ﾕ'  :'ユ',
'ﾖ'  :'ヨ',
'ﾗ'  :'ラ',
'ﾘ'  :'リ',
'ﾙ'  :'ル',
'ﾚ'  :'レ',
'ﾛ'  :'ロ',
'ﾜ'  :'ヮ',
'ﾜ'  :'ワ',
'ﾝ'  :'ン',
'ﾞ'  :'゛',
'ﾟ'  :'゜',
''   :''
};
$(function(){
  window.resizeTo(800,640);
  $('#han2zen').on('click',function(){
    let str = $('#text1').val();
    for (let key in henkan_table) {
      let char = key;
      if (-1 != $.inArray(key,['$','(',')','*','+','.','?','[',']','\\','^','|'])) {
        char = '\\'+key;
      }
      str = str.replace(new RegExp(char,'g'),henkan_table[key]);
    }
    $('#text2').val(str);
    return false;
  });
  $('#zen2han').on('click',function(){
    let str = $('#text1').val();
    for (let key in henkan_table) {
      let char = key;
      str = str.replace(new RegExp(henkan_table[key],'g'),char);
    }
    $('#text2').val(str);
    return false;
  });
});
</script>
</head>
<body>
<form class="ui form">
  <div class="ui basic segment">
    <div class="ui two column grid">
      <div class="column">
        <textarea id="text1" rows="30" class="textarea" placeholder="変換前"></textarea>
      </div>
      <div class="column">
        <textarea id="text2" rows="30" class="textarea" placeholder="変換後"></textarea>
      </div>
    </div>
    <div class="ui fluid buttons">
      <button class="ui positive button" id="han2zen">半角→全角変換</button>
      <div class="or"></div>
      <button class="ui negative button" id="zen2han">全角→半角変換</button>
    </div>
  </div>
</form>
</body>
</html>
Scroll to Top