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

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>

参考になれば幸いです。上記のファイルをダウンロードできます。最近はjQueryよりも素のJavascript(Vanilla JS)が多い。。。

ダウンロード


∞Tadashi Suyama∞

js str web code 文字列変換
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
ワードプレスでのカテゴリごとのページング方法

ワードプレスの投稿ページはカテゴリー関係なくページングされてしまいます。投稿順で表示されるのですが、これを同一カテゴリー内だけでページング、ページ送りをする方法をご紹介します。 お知らせ、ブロ...

09 Dec 2017

アイキャッチ
小学一年生のためのひらがなカタカナ神経衰弱

私の娘は遊ぶことが大好きです。でいつも何して遊ぶが口癖になっているほど遊びが大好き、当然勉強は嫌い。。。それでゲーム感覚で勉強が出来る方法がないかと思案したわけですが、カードゲームが好きなのでカ...

02 Dec 2017

アイキャッチ
グーグルマップのdirections APIを使ってバス貸切料金算出方法

グーグルマップのdirections apiは距離と時間を調べるときに役立ちます。複数の経由地も入れることが可能で[コチラ](https://developers.google.com/maps...

25 Nov 2017

アイキャッチ
日本語のwebフォントを作成する方法

Webフォントを使うといえば[Google Fonts](https://fonts.google.com/)を使って利用している人が多いかもしれません。 そのほか、アドビ社の[Typekit]...

18 Nov 2017

アイキャッチ
chromeのデフォルト機能でキャッシュ削除する方法

つい先日、クロームのcache killerというエクステンションが使えなくなりました。。。常にキャッシュを削除してくれるので良かったのですが、代わりの物を探していたらデフォルトでキャッシュを削...

11 Nov 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

js str web code 文字列変換
フッターイメージ