URI エンコード変換ツール

encodeURI や encodeURIComponent を使って文字列を変換するツールのサンプルです。

JavaScript を使ってそれぞれのボタンがクリックされたらその時点で textarea 要素に入力された値(value)を取得して、クリックされたボタンに対応する関数で変換して出力エリアの pre 要素の値(textContent)にしています。

また、どのボタンがクリックされたかがわかるようにボタンに記載されている関数名を表示するようにしています。

作成日:2021年03月21日

変換する文字列を入力してボタンをクリックします。

入力した文字の変換結果


      

encodeURI() は下記以外の文字をエスケープします。

A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
  • A-Z:半角英字の大文字
  • a-z:半角英字の小文字
  • 0-9:半角英字の数字
  • 半角スペースは「%20」に変換されます。

encodeURIComponent() は下記以外の文字をエスケープ( URI 構成要素としてエンコード)します。

 A-Z a-z 0-9 - _ . ! ~ * ' ( ) 

変換ツールのコード

以下は上記ツールの HTML と CSS です。

HTML
<div>
  <textarea id="input" rows="20" cols="60"></textarea>
</div>
<button id="encodeURI">encodeURI</button>
<button id="decodeURI">decodeURI</button>
<button id="encodeURIComponent">encodeURIComponent</button>
<button id="decodeURIComponent">decodeURIComponent</button>
<button id="clear-all">全てクリア</button>
<div>
  <p><span id="function-name">入力した文字</span>の変換結果</p>
  <pre id="output"></pre>
</div>
CSS
textarea {
  width: 95%;
  margin: 10px auto;
}
#output {
  width: 95%;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #efefef;
  font-family: "Lucida Console", Monaco, monospace;
  white-space: pre-wrap;
  overflow: auto;
  margin: 30px 0;
}

以下は上記ツールの JavaScript の記述です。

<script>
  const encodeURIBtn = document.getElementById('encodeURI');
  const decodeURIBtn = document.getElementById('decodeURI');
  const encodeURIComponentBtn = document.getElementById('encodeURIComponent');
  const decodeURIComponentBtn = document.getElementById('decodeURIComponent');
  const clearAllBtn = document.getElementById('clear-all');
  const functionNameSpan = document.getElementById('function-name');  
  const input =  document.getElementById('input');
  const output =  document.getElementById('output'); 

  encodeURIBtn.addEventListener('click', () => {
    output.textContent = encodeURI(input.value);
    functionNameSpan.textContent = "encodeURI() ";
  });
  decodeURIBtn.addEventListener('click', () => {
    output.textContent = decodeURI(input.value);
    functionNameSpan.textContent = "decodeURI() ";
  });
  encodeURIComponentBtn.addEventListener('click', () => {
    output.textContent = encodeURIComponent(input.value);
    functionNameSpan.textContent = "encodeURIComponentBtn()";
  });
  decodeURIComponentBtn.addEventListener('click', () => {
    output.textContent = decodeURIComponent(input.value);
    functionNameSpan.textContent = "decodeURIComponentBtn()";
  });
  clearAllBtn.addEventListener('click', () => {
    output.textContent = '';
    input.value = '';
    functionNameSpan.textContent = "入力した文字";
  });
</script>

関連ページ: