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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

タグクラウド

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