jsでURLエンコーダーを作成してみた

Web2016年9月14日

URLをエンコードするツールをjsで自作しました。
この手のツールはネット上にたくさん転がっていますが、セキュリティの面ではどうしても不安（form送信した場合など）が残ります。また、ツールを提供しているサイト自体がクローズするとその時点で使えなくなってしまうというデメリットもあり、その点自分で用意しておくと安心して使えます。ソースコードを丸ごとさらしますのでご活用いただければ幸いです。

サンプルコード（そのまま使えます）

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>URLエンコーダー</title>
<style type="text/css">
*{margin:0;padding:0}a:active,a:link{color:#367eb3;text-decoration:none}a:hover{color:#367eb3;text-decoration:underline}a:visited{color:#843a98;text-decoration:none}em{color:red;font-style:normal}input[type=input],input[type=text]{min-width:500px!important}input[type=input],input[type=text],select{padding:2px 5px;margin:0 5px;font-size:1.1em;border-radius:3px;border:1px solid #ccc;box-shadow:1px 1px 1px 1px hsla(0,0%,95%,.9) inset}select{min-width:60px}input[type=checkbox],input[type=radio]{position:relative;top:2px;margin-right:4px}img{max-width:100%;border:0 0}body{border-top:6px solid #000}footer{width:100%;padding:15px 0;background:#000;text-align:center;color:#fff;font-size:85%}h1{margin:0 0 .5em;padding:9pt 15px;font-size:24px;background-color:#111;color:#fff}h1,h2{font-weight:700;border-radius:4px}h2{margin:60px 0 .5em;padding:10px 15px;font-size:18px;background-color:#e2e2e2;color:#111}h3{margin:30px 0 10px;padding:0 0 6px;border-bottom:1px solid #333;font-weight:700;font-size:1pc}#contents{max-width:60pc;margin:40px auto 1em;padding:0 10px;font-family:Helvetica,Arial,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,モリサワ 新ゴ R,Droid Sans,メイリオ,'sans-serif';color:#333;font-size:14px;line-height:1.5}#contents p{margin:1em 0 1em}#contents table{width:100%;margin-bottom:20px;border-collapse:collapse}#contents table td,#contents table th{padding:10px 1pc;border:1px solid #ccc;text-align:left}#contents table th{background:#f9f9f9}#contents p.btn-generate{text-align:center}#contents p.btn-generate a{display:inline-block;padding:10px 30px;margin:30px auto;position:relative;background-color:#e3e3e3;border-radius:4px;color:#333;-webkit-transition:none;transition:none;box-shadow:0 2px 0 #aaa;text-shadow:0 2px 3px rgba(0,0,0,.1);font-size:1.2em}#contents p.btn-generate a:hover{background-color:#f00000;box-shadow:0 2px 0 #888;color:#fff;text-decoration:none}#contents p.btn-generate a:active{top:3px;box-shadow:none}#contents div.code-generated{display:none;max-width:940px;margin:0 auto 30px;background:#f3f3f3;padding:20px;position:relative;border:1px solid #000}#contents div.code-generated textarea{height:20px;width:100%;border:none;background:none;}
</style>
</head>
<body>
<div id="contents">
<h1>URLエンコーダー</h1>
<form>
<table class="set-template">
<col style="width:20%;">
<col style="width:80%;">
<tbody>
<tr class="link">
<th>URL</th>
<td>
<p><input placeholder="フルパスで入力" type="input" name="" value="" id="url"></p>
</td>
</tr>
</tbody>
</table>
</form>
<p class="btn-generate"><a href="#">エンコードする</a></p>
<div class="code-generated">
<textarea readonly></textarea>
</div>
</div>
<footer>
<p>&copy;Web屋の芝生DIY</p>
</footer>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
(function () {
    (function () {
        $(".comment,div.code-generated").hide();
        $("input, select, textarea").attr("autocomplete", "off");
        })();

        //「ソース生成」をクリック
        $("p.btn-generate a").click(function(e){

        //アンカーを無効化
        e.preventDefault();
        
        //入力値を取得
        var setValLink = $("input#url").val();
        var urlEncoded = encodeURIComponent(setValLink);

        //ソース出力
        $("div.comment").show();
        $("div.code-generated").hide().fadeIn().find("textarea").html("").append(urlEncoded);
    });
})();
</script>
</body>
</html>

※jQueryを読み込んでいる場合のスクリプトとなります

解説

入力されたURLをencodeURIComponent()でエンコードして変数urlEncodedに格納します。
格納された値をtextareaにappendし、fadeInで表示させています。

使い方

サンプルコードをコピーして、任意のファイル名で拡張子を.htmlにしてUTF-8で保存します。
保存したファイルをブラウザで開いてエンコードしたいURLをフルパスで入力し、「エンコードする」をクリックするとエンコードしたURLが表示されます。

jsのエンコード関数について

完全に余談ですが、jsのエンコード方法には「escape()」「encodeURI()」「encodeURIComponent()」の3種類があります。

※今回使用した関数はencodeURIComponent()

escape()

2016年9月現在、この関数は推奨されていません。ブラウザによって大きく挙動が異なるため、まず実装において使用するケースはないでしょう。
周りで使用している人がいたら全力で止めてあげてください。

encodeURI()

UTF-8をベースにエンコードされます。特別な意味を持つ予約文字「/」「:」「&」「+」「=」などはエンコードしません。つまり不完全なエンコードになります。
encodeURIを使用する場合、対象のURL文字列内のパラメータの値に予約文字が存在しないことが前提になります。
ですが、エンコードしたい場合必ずと言っていいほどこれらの文字が含まれる可能性は高く、そういった意味ではあまり使用はお勧めできません。
（ちなみに業務でencodeURI()を使用してしまったことがあり、痛い目を見たことがあります。。。）

encodeURIComponent()

今回使用したのはこちらの関数です。
URIComponent（URIを構成する部分文字列）がエンコードされます。URIで使用する記号をすべてエンコードするため、完全なエンコードになります。「/」「:」「&」「+」「=」などもエンコードしてくれるので、現状jsでエンコードを行う場合はencodeURIComponent()を使っておけば間違いありません。

まとめ

冒頭でも述べましたように自分でこういったツールを用意しておくと安心して使えますし、半永久的に保持することができます。
今後Webサイトを作るにあたってURLをエンコードするケースは無くならないと思われるので、ぜひご活用いただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。