JavaScript、C# URL编码、解码总结

在进行URL传输时，为了防止特殊字符导致的错误，需要对URL进行编码。JavaScript和C#都提供了URL编码、解码的方法。

JavaScript URL编码、解码

在JavaScript中，可以使用encodeURI、encodeURIComponent对URL进行编码，使用decodeURI、decodeURIComponent对URL进行解码。

encodeURI编码

encodeURI可以用来对整个URL进行编码，但只会对URI中的特殊字符进行编码，保留一些特殊字符，如;,/?:@&=+$#等。

const url = "https://www.example.com/search?q=JavaScript编码";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // https://www.example.com/search?q=JavaScript%E7%BC%96%E7%A0%81

encodeURIComponent编码

encodeURIComponent则可以用来编码URI中的所有特殊字符，包括;,/?:@&=+$#等。

const url = "https://www.example.com/search?q=JavaScript编码";
const encodedUrl = encodeURIComponent(url);
console.log(encodedUrl); // https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3DJavaScript%E7%BC%96%E7%A0%81

decodeURI解码

decodeURI可以用来对整个URL进行解码，与encodeURI对应。

const encodedUrl = "https://www.example.com/search?q=JavaScript%E7%BC%96%E7%A0%81";
const url = decodeURI(encodedUrl);
console.log(url); // https://www.example.com/search?q=JavaScript编码

decodeURIComponent解码

decodeURIComponent则可以用来解码URI中的所有特殊字符。

const encodedUrl = "https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3DJavaScript%E7%BC%96%E7%A0%81";
const url = decodeURIComponent(encodedUrl);
console.log(url); // https://www.example.com/search?q=JavaScript编码

C# URL编码、解码

在C#中，可以使用HttpUtility.UrlEncode、HttpUtility.UrlDecode对URL进行编码、解码。

HttpUtility.UrlEncode编码

HttpUtility.UrlEncode可以用来对整个URL进行编码，会对所有特殊字符进行编码，包括;,/?:@&=+$#等。

string url = "https://www.example.com/search?q=JavaScript编码";
string encodedUrl = HttpUtility.UrlEncode(url);
Console.WriteLine(encodedUrl); // https%3a%2f%2fwww.example.com%2fsearch%3fq%3dJavaScript%e7%bc%96%e7%a0%81

HttpUtility.UrlDecode解码

HttpUtility.UrlDecode可以用来对整个URL进行解码，与HttpUtility.UrlEncode对应。

string encodedUrl = "https%3a%2f%2fwww.example.com%2fsearch%3fq%3dJavaScript%e7%bc%96%e7%a0%81";
string url = HttpUtility.UrlDecode(encodedUrl);
Console.WriteLine(url); // https://www.example.com/search?q=JavaScript编码

示例

在一个网页中，用户可以输入一个URL进行页面跳转。为了防止输入的URL中包含特殊字符而导致跳转错误，我们可以使用JavaScript的encodeURIComponent对URL进行编码，然后通过POST请求将编码后的URL发送到后端。

<form action="/redirect" method="POST">
  <label for="url-input">请输入跳转的URL：</label>
  <input type="text" name="url" id="url-input">
  <button type="submit">跳转</button>
</form>

<script>
  const urlInput = document.querySelector('#url-input');

  document.querySelector('form').addEventListener('submit', (event) => {
    event.preventDefault(); // 阻止表单默认提交行为
    const encodedUrl = encodeURIComponent(urlInput.value);
    fetch('/redirect', {
      method: 'POST',
      body: JSON.stringify({
        url: encodedUrl
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          window.location.href = data.redirectUrl;
        } else {
          alert('跳转失败');
        }
      });
  });
</script>

后端代码（使用C#）可以先获取POST请求中的编码后的URL，然后通过HttpUtility.UrlDecode解码，最后进行跳转。

public ActionResult Redirect()
{
  string encodedUrl = Request.Form["url"];
  string decodedUrl = HttpUtility.UrlDecode(encodedUrl);
  return Redirect(decodedUrl);
}