はじめに
今回はJavaScriptを使って、URLエンコード・デコードを行います。
是非、参考にしてみてください。
encoding.jsのインストール
encoding.jsはNPMで導入することができます。
$ npm install --save encoding-japaneseimportで読み込む方法は以下です。
import Encoding from "encoding-japanese";CDNでも導入可能です。
encoding-japanese - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Convertscharacterencoding.-Simple.Fast.Reliable.Contentdeliveryatitsfinest.cdnjsisafreeandopen-sourceCDNservicetrustedbyover12.5%ofallwebsites,servingover200bil...
cdnjs.com
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エンコード・デコードにつきまして、以下のツールでも確認ができます。
URLエンコード・デコード
便利なツールを公開
chigusa-web.com
ブラウザ上で動作するため、簡単に試すことができます。
さいごに
今回はJavaScriptを使って、URLエンコード・デコードを行いました。
是非参考にしてみてください。
＼オススメ／
リンク
リンク
リンク
コメント