JavaScriptでURLエンコード
URLクエリ内に別URLをもたせたい時にURLをエンコードする方法についてまとめます。 今回はJavaScriptで実装しました。
encodeURI
はじめ、JavaScriptのencodeURIを試してみました。 本ブログのURLを引数に実行してみます。
> encodeURI('https://keinumata.hatenablog.com/') 'https://keinumata.hatenablog.com/'
結果は引数と何も変わらないです。これはencodeURI関数がURLを構成する予約語(;,/?:@&=+$)およびエンコードせず使用できる非予約語(-_.!~*'())はエンコードしないためです。 試しに空白を入れて実行してみます。
> encodeURI('https://keinumata.hatenablog.com/? a') 'https://keinumata.hatenablog.com/?%20a'
日本語もエンコードされます。
> encodeURI('https://keinumata.hatenablog.com/ジャヴァスクリプト') 'https://keinumata.hatenablog.com/%E3%82%B8%E3%83%A3%E3%83%B4%E3%82%A1%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88'
今回はURLのクエリに使用するため、予約語もエンコードしたいので他の関数を探してみます。
encodeURIComponent
encodeURIComponentはencodeURIと比較してURLを構成する予約語(;,/?:@&=+$)もエンコードします。エンコードせず使用できる非予約語(-_.!~*'())はエンコードしません。 試しにencodeURIで試したURLを実行してみます。
> encodeURIComponent('https://keinumata.hatenablog.com/') 'https%3A%2F%2Fkeinumata.hatenablog.com%2F'
スラッシュやコロンもエンコードできました。
結論
- URLクエリにURLを使用する場合は
encodeURIではなくencodeURIComponentを使う
