encodeURIとは
- ここで説明するencodeURI とは次の語句からなるjavascriptの関数です。
- encode
- 読み: エンコード
意味: 符号化、暗号化 - uniform
- 読み: ユニフォーム
意味: 統一 - resource
- 読み: リソース
意味: 資源 - identifier
- 読み: アイデンティファイア
意味: 識別子
encodeURI関数の概要
この関数は引数に与えられたURI (Uniform Resource Identifier; 統一資源識別子) をエンコードします。
URI で、私たちが目にしやすいものというとURLが挙げられます。 URLに%の文字が含まれる符号化されたデータを目にすることもあります。
エンコードされる各文字は、それそれがUTF-8符号の文字を表す1から4個のエスケープシーケンスに置き換えられます。
構文
サンプルを見る前に構文を確認しておきます。
encodeURI(URI)サンプルコードと実行結果
このサンプルでは識別子idSubmitURLの要素内のテキストをエンコードして、 結果を識別子idOutputの要素内のテキストに出力します。
サンプルコードには含んでいませんが、idSubmitURLのテキストは、このページに サンプルの送信フォームからデータをGET送信した結果のURLになるように処理をしています。
サンプルコード: HTML
<body>
<p>
<samp id="idSubmitURL">
https://example.com/URI
</samp>
</p>
<p>
<output id="idOutput">
https://example.com/encodeURI
</output>
</p>
</body>
- 03-05: samp要素 (送信されたパラメーター付きのURLサンプルです。)
- 08-10: output要素 (エンコードしたURLの結果を出力します。)
サンプルコード: script
<script>
let elmSubmitURL = document.getElementById("idSubmitURL");
let elmOutput = document.getElementById("idOutput");
elmOutput.innerText = encodeURI(elmSubmitURL.innerText);
</script>
- 02: 変数 elmSubmitURL (idSubmitURLの要素を参照するための変数です。)
- 03: 変数 elmOutput (idOutputの要素を参照するための変数です。)
- 04: エンコード処理と出力 (elmSubmitURLのinnerTextをエンコードしています。)
↓ encodeURI ↓
結果: id="idOutput"