Unicodeのコードから文字列変換そしてデコード

2016-03-26 最終更新日:2016-03-27

文字コードをユニコードの値から文字列を出力するプログラム関数 String.fromCharCode()というのを使ってプログラムを作ってみます。

これを使うことでちょっとした暗号文が出来ます。暗号って言うほどでもないですが文字を数値に変換してくれるので数値ばかりなので普通に人には分からないと思います。

ただこの数値は分かる人には分かります。しかも文字コード表もありますから見ていけば分かります。簡易の暗号文といったところでしょうか。

こちらにABCの文字コードを入れてみると下記のような感じになります。

String.fromCharCode(65,66,67) => ABC

Aが65でBが66でCが67ですのでカンマ区切りで入れていくことで文字列が表示されます。

下記のコードを見ていただければ分かると思います。

str = '72,101,108,108,111,33,87,111,114,108,100,33';
codeToStr = function(e) {
	var val, num, i, str;
	val = e;
	num = val.split(",");
	str = '';
	for (i = 0; i < num.length; i++) {
		str += String.fromCharCode(parseInt(num[i]));
	}
	return str;
};
codeToStr(str);
=> Hello!World!

変数strに入ってきた文字列をカンマで切った数値を一つずつ String.fromCharCode()に入れて文字列を拾っています。

逆の場合はcharCodeAt()の関数を使います。

char = 'Hello!World!';
 strToCode = function(e) {
    var i, num, val;
    val = e;
    num = '';
    for (i = 0; i < val.length; i++) {
        if (i != 0) {
          num += ',';
        }
        num += val.charCodeAt(i);
    }
    return num
  };

strToCode(char);
=> 72,101,108,108,111,33,87,111,114,108,100,33

実際のデモを見ていただくとわかりやすいかもしれません。

⇒デモを見てみる

下記は全文です。

index.html

<!DOCTYPE html>
<html>
	<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>文字コード変換プログラム - ウェブ制作・システム開発のITS</title>
	<meta name="description" content="Unicodeの値の指定のシーケンスを使用することによって生成された文字列を返すjavascriptプログラム">

</head>

	<body>
	<h1>文字コード変換プログラム<small>デコード付き</small></h1>

	<label for="str_value">文字列</label>
	<textarea class="form-control" rows="3" id="str_value"></textarea>
	<label for="code_result">変換後コード</label>
	<textarea class="form-control" rows="5" id="str_result" readonly></textarea>
	<button type="button" class="btn btn-primary" id="str_btn">コードに変換する</button>
	<button type="reset" class="btn btn-danger" id="reset_btn">リセット</button>
	<label for="code_value">デコード</label>
	<textarea class="form-control" rows="3" id="code_value"></textarea>
	<label for="code_result">変換後文字列</label>
	<textarea class="form-control" rows="5" id="code_result" readonly></textarea>
		<button type="button" class="btn btn-primary" id="code_btn">文字列に変換する</button>
<script>
// Generated by CoffeeScript 1.10.0
(function() {
  'use strict';
   /*
    変数初期化＆id設定
   */
  var str_result, code_result, str_input, code_input, code_btn, str_btn, reset_btn, str_value_id, code_value_id, str_id, code_id, str_btn_id, code_btn_id, reset_btn_id, strToCode, codeToStr, esc, validate, codeResult, strResult, reset;

  str_value_id = 'str_value';
  code_value_id = 'code_value';
  str_id = 'str_result';
  code_id = 'code_result';
  str_btn_id = 'str_btn';
  code_btn_id = 'code_btn';
  reset_btn_id = 'reset_btn';

  /*
    入力値と結果値を変数化
   */
  str_result = document.getElementById(str_id);
  code_result = document.getElementById(code_id);
  str_input = document.getElementById(str_value_id);
  code_input = document.getElementById(code_value_id);
   /*
    文字列からコード変換関数
   */
  strToCode = function(e) {
    var i, num, val;
    val = e;
    num = '';
    for (i = 0; i < val.length; i++) {
        if (i != 0) {
          num += ',';
        }
        num += val.charCodeAt(i);
    }
    return num
  };

   /*
    コードから文字列変換関数
   */
  codeToStr = function(e) {
    var val, num, i, str;
    val = e;
    num = val.split(",");
    str = '';
    for (i = 0; i < num.length; i++) {
       str += String.fromCharCode(parseInt(num[i]));
    }
    return str;
  };

   /*
    取得した値が空かどうか
   */
  validate = function(id) {
    var char_value, result;
    char_value = esc(document.getElementById(id).value);
    if (!char_value ) {
        return false;
    }
      return char_value;
  };

  /*
    コード結果を表示
   */
  codeResult = function() {
    var result, code_value;
    code_value = validate(code_value_id);
    if(!code_value) {
      code_result.value = 'コードを入力してください';
    } else {
      code_result.value = codeToStr(code_value);
    }
  };
 /*
    文字列結果を表示
   */
  strResult = function() {
    var result, str_value;
    str_value = validate(str_value_id);
    if(!str_value) {
      str_result.value = '文字列を入力してください';
    } else {
      str_result.value = strToCode(str_value);
    }
  };

 /*
    リセット
   */
  reset = function(){
    str_result.value = '';
    code_result.value = '';
    str_input.value = '';
    code_input.value = '';
  };

   /*
    HTMLエスケープ処理
   */
   esc = function(str) {
    str = str.replace(/&/g, '&amp;');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/"/g, '&quot;');
    str = str.replace(/'/g, '&#39;');
    return str;
  };
  /*
    ボタン値処理とクリック処理
   */
  str_btn = document.getElementById(str_btn_id);
  code_btn = document.getElementById(code_btn_id);
  reset_btn = document.getElementById(reset_btn_id);

  str_btn.addEventListener("click", strResult, false);
  code_btn.addEventListener("click", codeResult, false);
  reset_btn.addEventListener("click", reset, false);


})();

</script>
</body>
</html>