JavaScriptでurlencodeを習得！5つの使い方とサンプルコード

const str = "こんにちは、世界！";
const encodedStr = encodeURIComponent(str);
console.log(encodedStr); // %E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E3%80%81%E4%B8%96%E7%95%8C%EF%BC%81

const baseUrl = "https://example.com/search?";
const queryParam = "query";
const queryValue = "JavaScript urlencode";
const encodedQueryParam = encodeURIComponent(queryParam);
const encodedQueryValue = encodeURIComponent(queryValue);
const url = `${baseUrl}${encodedQueryParam}=${encodedQueryValue}`;
console.log(url); // https://example.com/search?query=JavaScript%20urlencode

<form id="myForm">
  <input type="text" name="username" placeholder="ユーザ名" />
  <input type="submit" value="送信" />
</form>

<script>
document.getElementById("myForm").addEventListener("submit", (event) => {
  event.preventDefault();
  const formData = new FormData(event.target);
  const encodedData = new URLSearchParams(formData).toString();
  console.log(encodedData); // username=%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%90%8D
});
</script>

const url = "https://example.com/api/search";
const query = "JavaScript urlencode";
const encodedQuery = encodeURIComponent(query);
const dataToSend = `query=${encodedQuery}`;

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: dataToSend
})
  .then((response) => response.json())
  .then((data) => console.log(data));

<a id="myLink" href="#">リンク</a>

<script>
const baseUrl = "https://example.com/search?";
const queryParam = "query";
const queryValue = "JavaScript urlencode";
const encodedQueryParam = encodeURIComponent(queryParam);
const encodedQueryValue = encodeURIComponent(queryValue);
const url = `${baseUrl}${encodedQueryParam}=${encodedQueryValue}`;

document.getElementById("myLink").href = url;
</script>

function customEncode(str) {
  return str.replace(/\s/g, (match) => {
    return encodeURIComponent(match);
  });
}

function customEncode(str) {
  return str.replace(/[^a-zA-Z]/g, (match) => {
    return "%" + match.charCodeAt(0).toString(16);
  });
}