JavaScript で URL エンコード、 URL デコードの変換テスト。

再度

以前、当ブログで、 Javascript による URL エンコード・ URL デコードについて投稿したことがありましたが、その時の変換フォームの使い勝手があまり良くないため、変換フォームをメインにして、再度、投稿を作成してみました。

ちなみに、以前の投稿は、以下のリンクになります。変換フォームが、長いページの途中に設置してあるので、少し分かりにくいと思います。

JavaScript で URL エンコード、デコード。 – pulogu.net: https://pulogu.net/blog/020-computer/javascript/url-encode-decode/

目次まで戻る

変換フォーム

プライバシーポリシー

下記フォームの入力内容、実行結果は、当サイト管理人および外部に送信される仕組みで作成していません。ただ、何があるか分からないので、念のため、重要な情報は入力しないほうが良いと思います。

目次まで戻る

HTML ソースコード

HTML の <head></head> 内で <meta charset="UTF-8"> を指定しています。

ID 指定の「4078」は、ワードプレスの投稿 ID から取っているだけなので、特別な書式などではありません。

<form>
<!--元文字列-->
<div class="form-group">
  <label for="p4078-moto">変換したい文字列</label>
  <textarea id="p4078-moto" class="form-control" rows="3" placeholder="変換したい文字列をここに入力します。"></textarea>
</div>
<!--実行ボタン-->
<div class="form-group">
  <button id="p4078-jikkou" class="btn btn-default" type="button">実行する</button>
</div>
<!--encodeURI結果-->
<div class="form-group">
  <label for="p4078-kekka-e">encodeURI 結果文字列</label>
  <textarea id="p4078-kekka-e" class="form-control" rows="3" placeholder="ここに結果が表示されます。"></textarea>
</div>
<!--encodeURIComponent結果-->
<div class="form-group">
  <label for="p4078-kekka-ec">encodeURIComponent 結果文字列</label>
  <textarea id="p4078-kekka-ec" class="form-control" rows="3" placeholder="ここに結果が表示されます。"></textarea>
</div>
<!--decodeURI結果-->
<div class="form-group">
  <label for="p4078-kekka-d">decodeURI 結果文字列</label>
  <textarea id="p4078-kekka-d" class="form-control" rows="3" placeholder="ここに結果が表示されます。"></textarea>
</div>
<!--decodeURIComponent結果-->
<div class="form-group">
  <label for="p4078-kekka-dc">decodeURIComponent 結果文字列</label>
  <textarea id="p4078-kekka-dc" class="form-control" rows="3" placeholder="ここに結果が表示されます。"></textarea>
</div>
</form>

目次まで戻る

Javascript ソースコード

JS ファイルは、 UTF-8 , LF で保存しています。

jQuery を使用しています。ID セレクター , val() , click() など。

jQuery( function( $ ){
  $( "#p4078-jikkou" ).click( function(){ //実行ボタンクリック時
    var m = $( "#p4078-moto" ).val(); //元文字列取得
    if( m !== "" ){ //空白ではない
      $( "#p4078-kekka-e"  ).val( encodeURI( m ) );          //結果表示
      $( "#p4078-kekka-ec" ).val( encodeURIComponent( m ) ); //結果表示
      $( "#p4078-kekka-d"  ).val( decodeURI( m ) );          //結果表示
      $( "#p4078-kekka-dc" ).val( decodeURIComponent( m ) ); //結果表示
    }
  } );
} );

encodeURI() と encodeURIComponent() は、エスケープされない文字に違いがあるようです。以下のリンクに、エスケープされない文字というのが記載されています。私の場合、サロゲートペアの部分が、よくわかりません。