はじめに
今回はJavaScriptを使って、URLエンコード・デコードを行います。
是非、参考にしてみてください。
URLエンコードとは
URLエンコードは、URLに含めることができない特殊文字を「%」記号と16進数で表現する方法です。
これにより、安全にウェブ上で情報の送受信が可能になります。
例えば半角スペースは「%20」、アンパサンド「&」は「%26」に置き換えられます。
URLデコードとは
URLデコードは、エンコードされたURLを元の形式に戻すことです。
URLデコードは基本的にエンコードの逆の作業を行います。
エンコード時に特殊文字が「%」記号に続く2つの16進数文字に変換されていますので、デコード時にはこれを元の特殊文字に戻します。
多くのプログラミング言語には、デコードするための関数が用意されています。
encoding.jsのインストール
encoding.jsはNPMで導入することができます。
$ npm install --save encoding-japaneseimportで読み込む方法は以下です。
import Encoding from "encoding-japanese";CDNでも導入可能です。
CDNの場合は、Headタグに以下のように定義します。
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/2.0.0/encoding.min.js"
integrity="sha512-AhAMtLXTbhq+dyODjwnLcSlytykROxgUhR+gDZmRavVCNj6Gjta5l+8TqGAyLZiNsvJhh3J83ElyhU+5dS2OZw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</head>
<body>
...
</body>
</html>
URLエンコード
URLエンコードについては、以下のコードで実現できます。
エンコードしたい文字列を指定します。
const encArray = Encoding.stringToCode("URLエンコード・デコード");
const enc = Encoding.urlEncode(encArray);
console.log(enc);以下のようにエンコードされた文字列を取得することができました。
URL%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%83%BB%E3%83%87%E3%82%B3%E3%83%BC%E3%83%89UTF-8の文字列をShift JISに変換してURLエンコードする実装です。
const encArray = Encoding.stringToCode("URLエンコード・デコード");
// Shift JISへ変換
const sjisArray = Encoding.convert(encArray, "SJIS");
const enc = Encoding.urlEncode(sjisArray);
console.log(enc);以下のようにエンコードされた文字列を取得することができました。
URL%83G%83%93%83R%81%5B%83h%81E%83f%83R%81%5B%83hURLデコード
UTF-8の文字列のURLデコードについては、以下のコードで実現できます。
デコードしたい文字列を指定します。
const dec = Encoding.urlDecode(
"URL%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%83%BB%E3%83%87%E3%82%B3%E3%83%BC%E3%83%89"
);
const decArray = Encoding.codeToString(dec);
const utfArray = Encoding.convert(decArray, {
to: "UNICODE",
from: "UTF8",
});
console.log(utfArray);以下のようにエンコード前の文字列を取得することができました。
URLエンコード・デコードShift JISでURLエンコードされた文字列をデコードする実装です。
const dec = Encoding.urlDecode(
"URL%83G%83%93%83R%81%5B%83h%81E%83f%83R%81%5B%83h"
);
const decArray = Encoding.codeToString(dec);
const sjisArray = Encoding.convert(decArray, {
to: "UNICODE",
from: "SJIS",
});
console.log(sjisArray);以下のようにエンコード前の文字列を取得することができました。
URLエンコード・デコードチグサツール
URLエンコード・デコードにつきまして、以下のツールでも確認ができます。
ブラウザ上で動作するため、簡単に試すことができます。
さいごに
今回はJavaScriptを使って、URLエンコード・デコードを行いました。
是非参考にしてみてください。
コメント