URL 与 URL编码

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

URL 简介

URL [wiki] 即统一资源定位符（Uniform Resource Locator），是因特网上标准的资源的定位地址，俗称 网址。

URL 语法格式

统一资源定位符的标准格式如下：

scheme : [//[user:password@]host[:port]] [/] path [?query] [#fragment]

  • scheme：（传送协议，例如：http，https，ftp 等）
  • An authority part （一个权威的部分，它包含：）
* 格式：`[//[user:password@]host[:port]]`
* 一个可选的 `身份验证` 部分
* `host` 通常为一个[域名](//zh.wikipedia.org/wiki/%E5%9F%9F%E5%90%8D)（有时是一个[IP地址](//zh.wikipedia.org/wiki/IP%E5%9C%B0%E5%9D%80)）
* 一个可选的 `端口` 部分。（HTTP 默认端口为 `:80`，HTTPS 默认端口为 `:443`）
  • path：（路径，它标明了资源的详细路径）
  • ?query：（一个可选的查询，通常是要发送给 http 服务器的数据。GET 模式的表单参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与值，通常以 UTF-8 的URL 编码，避开字符冲突的问题）

  • #fragment：（一个可选的片段，或称之为 锚，提供二次资源定向）

    The fragment contains a fragment identifier providing direction to a secondary resource, such as a section heading in an article identified by the remainder of the URI. When the primary resource is an HTML document, the fragment is often an id attribute of a specific element, and web browsers will scroll this element into view.

一个 URL 实例

  • http://www.asdfghjk.com:8080/home/index.html?name=percy&age=22#page-top

    • scheme: http
    • host: www.asdfghjk.com
    • port: :8080
    • path: /home/index.html
    • ?query: ?name=percy&age=22
    • #fragment: #page-top

URL 编码

URL 编码 [wiki]（URL encoding），也称做百分号编码（Percent-encoding），是特定上下文的统一资源定位符 (URL)的编码机制。

URI 所允许的字符分作保留与未保留。保留字符是那些具有特殊含义的字符。

reserved-url-encoding

再补充一个：百分号字符 % 的 URL 编码 %25 !

URL 与 URI

URI （Uniform Resource Identifier），统一资源标识符，是一个用于标识某一互联网资源名称的字符串
URL 是一种 URI，URL 是 URI 的一个子集

这里不再对 URI 进行深入讨论，更深了解，参看这篇文章：你知道 URL、URI 和 URN 三者之间的区别吗？

JavaScript 编码解码 URL

  • 编码

    • escape()
      • 不要使用它，因为从 ES3 起，它就不被赞成使用了。

    • encodeURI(URI)：用于对统一资源标识符（URI）的组成部分进行编码
      code

    • encodeURIComponent(str)：用于对统一资源标识符（URI）的组成部分进行编码

      • encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、’、-和_之外的所有字符。

注意： encodeURI 自身无法产生能适用于 HTTP GET 或 POST 请求的 URI，例如对于 XMLHTTPRequests, 因为 “&”, “+”, 和 “=” 不会被编码，然而在 GET 和 POST 请求中它们是特殊字符。然而 encodeURIComponent 这个方法会对这些字符编码。

  • 解码

    • decodeURI(encodedURI)：用于解码由 encodeURI 方法或者其它类似方法编码的统一资源标识符（URI）

    • decodeURIComponent(str)： 方法用于解码由 encodeURIComponent 方法或者其它类似方法编码的部分统一资源标识符（URI）

var url = "http://www.search.com:8080/?language=zh-CN&content=人生#top";
var url111 = encodeURI(url);
var url222 = encodeURIComponent(url);

console.log(url111);
// http://www.search.com:8080/?language=zh-CN&content=%E4%BA%BA%E7%94%9F#top
console.log(url222);
// http%3A%2F%2Fwww.search.com%3A8080%2F%3Flanguage%3Dzh-CN%26content%3D%E4%BA%BA%E7%94%9F%23top

url111 = decodeURI(url111);
url222 = decodeURIComponent(url222);

console.log(url111);
// http://www.search.com:8080/?language=zh-CN&content=人生#top
console.log(url222);
// http://www.search.com:8080/?language=zh-CN&content=人生#top

最后，针对使用上面对 URI 编码的函数，有一点需要注意一下：不要对整个 URL 使用 encodeURIComponent，因为他会破坏 URL。更多详细信息，看下面的链接，讲的真的很详细。

链接：When are you supposed to use escape instead of encodeURI / encodeURIComponent?

参考资料