【JavaScript】暗号みたいな文章を作るツール《英語⇔記号》

はじめに

英語を記号に置換して暗号のような文章を生成するツールをJavaScriptで作ってみました。

■ サンプル

【JavaScript】暗号みたいな文章を作るツール《英語⇔記号》 - text
https://text.sakura.ne.jp/search/result/note-tool-angou.html

■ ソースコード

window.onload = function() {

// * [作成] HTMLで｢入力フォーム｣｢作成ボタン｣｢出力フォーム｣など作る
let div_1  = document.createElement("div");div_1.id  = 'title';
document.getElementsByTagName("body").item(0).appendChild(div_1);
let div_2  = document.createElement("div");div_2.id  = 'description';
document.getElementsByTagName("body").item(0).appendChild(div_2);
let div_3  = document.createElement("div");div_3.id  = 'result-bef';
document.getElementsByTagName("body").item(0).appendChild(div_3);
let div_4  = document.createElement("div");div_4.id  = 'result';
document.getElementsByTagName("body").item(0).appendChild(div_4);
let div_5  = document.createElement("div");div_5.id  = 'result-aft';
document.getElementsByTagName("body").item(0).appendChild(div_5);

document.title = '【JavaScript】暗号みたいな文章を作るツール《英語⇔記号》';
document.getElementById("title").innerHTML       = '【JavaScript】暗号みたいな文章を作るツール《英語⇔記号》';
document.getElementById("description").innerHTML = 'a～zまでの英語を、@や&などの記号に置換します。<br>[置換前の例] abcdefg<br>[置換後の例] @&()&lt;?$';
document.getElementById("result-bef").innerHTML  = '<textarea id="input" rows="10" cols="100"></textarea>';
document.getElementById("result").innerHTML      = '<input id="clickBtn" type="button" value="暗号みたいな文章を作る">';
document.getElementById("result-aft").innerHTML  = '<textarea id="output" rows="10" cols="100" placeholder="ここに出力されます"></textarea>';

// ** [実行] ボタンクリック時に実行
const clickBtn = document.getElementById("clickBtn");
clickBtn.addEventListener("click", event => {

// ** [取得] テキストエリアに入力された文字を取得
let textarea = document.getElementById("input").value;

// ** [準備] 置換前の英語、置換後の記号
let textBef = ["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"];
let textAft = ["@","&","(",")","<","?","$","~","!","}","*","|","#","/","o","{","%","`",":",">","'","^","=","_","+","-"];

// ** [準備] 下記のfor文の中で使う変数を宣言
let regExp = "";let replaceBef = "";let replaceAft = "";

// ** [ﾙｰﾌﾟ] 置換する文字の種類の数だけ繰り返す
// ** [取得] 置換前の英語と置換後の記号を１文字ずつ取り出す
// ** [置換] 取り出した１文字の英語を記号に置換 
for (let i=0; i<textBef.length; ++i){
replaceBef = textBef.slice(i, i+1);
replaceAft = textAft.slice(i, i+1);
regExp = new RegExp(replaceBef, "g");
textarea = textarea.replace(regExp, replaceAft);
}

// ** [出力] テキストエリアに置換した文字を表示
document.getElementById("output").value = textarea;

});

};

■ 参考ページ

・ window.onload - MDN
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload
・ 関数 - MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions
・ 文法とデータ型 - MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types
・ Document.createElement() - MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/createElement
・ Document.getElementsByTagName() - MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
・ Node.appendChild - MDN
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild
・ Document.getElementById() - MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
・ EventTarget.addEventListener() - MDN
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
・ 配列 - MDN
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays
・ ループと反復処理 - MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration
・ RegExp - MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp
・ String.prototype.replace() - MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

おわりに

置き換える記号の順番（textAftの配列の並び順）を、パスワードで変更できるようにすれば、パスワードを知っている人だけが解読できる文章を作れるかもしれません。パスワードが111の時は、｢A｣が｢@｣に置き換えられて、パスワードが222の時は、｢A｣が｢&｣に置き換えられる…という風に。

#私の作品紹介 / #プログラミング初心者

（text）

◇　　◇　　◇