URI（URL）エンコード変換ツール

encodeURI や encodeURIComponent を使って文字列を変換（エンコード・デコード）するツールのサンプルです。

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

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

作成日：2021年03月21日

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

変換結果

encodeURI() は下記以外の文字をエンコードします。

A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

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

フォームからサーバーに POST されるユーザー入力値には encodeURIComponent を使用します。

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

A-Z：半角英字の大文字
a-z：半角英字の小文字
0-9：半角英字の数字
半角スペースは %20 に変換されます。

変換ツールのコード

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

<div>
  <textarea id="input" rows="20" cols="60"></textarea>
</div>
<div class="btn-group">
  <button id="encodeURI">encodeURI</button>
  <button id="decodeURI">decodeURI</button>
</div>
<div class="btn-group">
  <button id="encodeURIComponent">encodeURIComponent</button>
  <button id="decodeURIComponent">decodeURIComponent</button>
</div>
<div  class="btn-group">
  <button id="copy-btn">結果をコピー</button>
  <button id="clear-all">全てクリア</button>
</div>
<div class="result-area">
  <p><span id="function-name">入力した文字</span>の変換結果</p>
  <pre id="output"></pre>
</div>

button {
  border: 1px solid #999;
  padding: .5rem 1rem;
  cursor: pointer;
  margin-right: 20px;
}

.btn-group {
  margin: 20px 0;
}

textarea {
  width: 95%;
  margin: 10px auto;
}

#copy-btn {
  margin-top: 20px;
}

#output {
  width: 95%;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fefefe;
  font-family: "Lucida Console", Monaco, monospace;
  white-space: pre-wrap;
  overflow: auto;
  margin: 30px 0;
  min-height: 100px;
}

.result-area {
  margin-top: 50px;
}

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

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');
const copyBtn = document.getElementById('copy-btn');

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 = "encodeURIComponent()";
});
decodeURIComponentBtn.addEventListener('click', () => {
  output.textContent = decodeURIComponent(input.value);
  functionNameSpan.textContent = "decodeURIComponent()";
});
clearAllBtn.addEventListener('click', () => {
  output.textContent = '';
  input.value = '';
  functionNameSpan.textContent = "入力した文字";
});
copyBtn.addEventListener('click', () => {
  copyToClipboard(copyBtn, output.textContent)
}, false);

function copyToClipboard(btn, text) {
  if (!navigator.clipboard) {
    alert('お使いのブラウザではコピーできません。');
  }
  navigator.clipboard.writeText(text).then(
    () => {
      btn.textContent = 'コピー完了';
      resetCopyBtnText(btn, 1500);
    },
    (error) => {
      btn.textContent = '失敗';
      resetCopyBtnText(btn, 1500);
      console.log(error.message);
    }
  );
};

function resetCopyBtnText(btn, delay) {
  setTimeout(() => {
    btn.textContent = '結果をコピー'
  }, delay)
}

サンプルコード

以下のコードをコピーして保存すれば、ローカルで使用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>URI（URL）エンコード変換ツール</title>
  <style>
    body {
      margin: 50px auto;
      max-width: 840px;
    }

    button {
      border: 1px solid #999;
      padding: .5rem 1rem;
      cursor: pointer;
      margin-right: 20px;
    }

    .btn-group {
      margin: 20px 0;
    }

    textarea {
      width: 95%;
      margin: 10px auto;
    }

    #copy-btn {
      margin-top: 20px;
    }

    #output {
      width: 95%;
      border: 1px solid #ccc;
      padding: 10px;
      background-color: #fefefe;
      font-family: "Lucida Console", Monaco, monospace;
      white-space: pre-wrap;
      overflow: auto;
      margin: 30px 0;
      min-height: 100px;
    }

    .result-area {
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div>
    <textarea id="input" rows="20" cols="60"></textarea>
  </div>
  <div class="btn-group">
    <button id="encodeURI">encodeURI</button>
    <button id="decodeURI">decodeURI</button>
  </div>
  <div>
    <button id="encodeURIComponent">encodeURIComponent</button>
    <button id="decodeURIComponent">decodeURIComponent</button>
  </div>
  <div>
    <button id="copy-btn">結果をコピー</button>
    <button id="clear-all">全てクリア</button>
  </div>
  <div class="result-area">
    <p><span id="function-name">入力した文字</span>の変換結果</p>
    <pre id="output"></pre>
  </div>

  <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');
    const copyBtn = document.getElementById('copy-btn');

    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 = "encodeURIComponent()";
    });
    decodeURIComponentBtn.addEventListener('click', () => {
      output.textContent = decodeURIComponent(input.value);
      functionNameSpan.textContent = "decodeURIComponent()";
    });
    clearAllBtn.addEventListener('click', () => {
      output.textContent = '';
      input.value = '';
      functionNameSpan.textContent = "入力した文字";
    });
    copyBtn.addEventListener('click', () => {
      copyToClipboard(copyBtn, output.textContent)
    }, false);

    function copyToClipboard(btn, text) {
      if (!navigator.clipboard) {
        alert('お使いのブラウザではコピーできません。');
      }
      navigator.clipboard.writeText(text).then(
        () => {
          btn.textContent = 'コピー完了';
          resetCopyBtnText(btn, 1500);
        },
        (error) => {
          btn.textContent = '失敗';
          resetCopyBtnText(btn, 1500);
          console.log(error.message);
        }
      );
    };

    function resetCopyBtnText(btn, delay) {
      setTimeout(() => {
        btn.textContent = '結果をコピー'
      }, delay)
    }
  </script>
</body>
</html>

Web Design Leaves

URI（URL）エンコード変換ツール

変換ツールのコード

サンプルコード