如何使用 JavaScript 解析 URL?

零 JavaScript教程评论153字数 8906阅读29分41秒阅读模式

如何使用 JavaScript 解析 URL?

URL 是 Uniform Resource Locator 的缩写,即统一资源定位符。URL 就是一个给定的独特资源在 Web 上的地址。如果你从事 Web 前端开发有一段时间了,相信一定会遇到需要使用 JavaScript 解析 URL 地址信息的时候。本文就介绍一下如何使用 JavaScript 解析 URL。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

URL 格式

让我们再来回顾一下 URL 的格式:文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

absolute-uri-path.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

完整的 URL 信息包括以下几点:文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

  • 协议(protocol):采用的协议方案;
  • 登录信息(username & password):(可选项)指定用户名和密码,用来从服务器获取资源时的认证信息;
  • 服务器地址(hostname):待访问的服务器地址。可以是域名形式也可以是 IP 地址;
  • 服务器端口号(port):;(可选项)指定服务器连接网路的端口号;
  • 带层次的文件路径(pathname):指定服务器上的文件路径来定位特指的资源;
  • 查询字符串(search):(可选项)查询字符串参数;
  • 片段标识符(hash):(可选项)用来标记已获取资源中的子资源;

解析 URL

在回顾 URL 都包括哪些信息后,接下来就介绍如何使用 JavaScript 来解析 URL 的这些信息。以本文地址为例:文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

vbnet

复制代码
  1. http://www.yaohaixiao.com/blog/how-to-parse-url-with-javascript/

按照 URL 的格式规范,本文的 URL 地址解析后的信息应该如下:文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

  • protocol: http
  • hostname: www.yaohaixiao.com
  • pathname: /blog/how-to-parse-url-with-javascript/

可以看到,本文地址的 URL 解析后的信息并没有前文提到的完整 URL 信息中那么多。这是因为 URL 信息中有几项信息是可选项信息,本文的示例 URL 地址中都是没有值的。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

在通过人工分析的方式分析了一遍,现在就要开始使用 JavaScript 编程解析 URL 信息了。当然,解析 URL 信息的方法很多,本文主要介绍两种解析方法:正则表达式解析 和 URL 构造函数解析。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

正则表达式解析

使用 JavaScript 中的正则表达解析 URL 信息应该最常见的方法了,当然这需要具备一定的 JavaScript 正则表达式相关的知识。而使用正则表达式分析 URL 地址其实也并不复杂。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

按照前文图片中的 URL 信息的结构,使用括号“()”分组表达符对 URL 中对应的信息进行分组,正则表达式的伪代码大致如下:文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16619.html

ruby

复制代码
  1. /^((protocol):)?//((username):(password)@)?(hostname)(:(port))?(pathname)(?(search))?(#(hash))?/

可以看到,正则表达式也分了 7 组:

  1. protocol - 协议分组:((protocol):)?,最外层的 ()? 中,? 表示数量为 0 或 1 个,即表示协议名称是可选的;
  2. auth - 授权信息分组:((username):(password)@)?,与协议分组一样,整个授权分组也是可选的。其中又包含 username 子分组和 password 子分组;
  3. hostname - 服务器地址分组:(hostname),表示 hostname 信息是必选的;
  4. port - 端口分组:(:(port))?,表示端口号是可选的;
  5. pathname - 带层次的文件路径分组:(pathname),表示文件路径是必选的;
  6. search - 查询字符串分组:(?(search))?,表示查询字符串是可选的;
  7. hash - 片段标识符分组:(#(hash))?,表示片段标识符分组也是可选的;

完成了大的分组后,接下来要处理的问题就是相对比较容易了,就是用真是的正则表达式将使用英文字母的伪代码内容替换掉。对应完整的 JavaScript 的正则表达式代码如下图:

absolute-uri-path (1).png

可以看到,途中蓝色文字标识的是伪代码中对应的 7 个分组,而灰色文字标识的是最终需要获取的 URL 对应的信息。下面就详细介绍一下各个分组的正则表达式的含义。

1. protocol(协议分组)

csharp

复制代码
  1. // ((protocol):)?
  2. (([^:/?#]+):)?

([^:/?#]+),匹配协议名称(子分组),具体的含义如下:

  • [^],表示除了“^”符号后的字符以外的所有字符。 [^:/?#] 就表示除了":"(冒号)、"/"(反斜杠)、“?”(问号)和“#”(井号)以外的所有字符。也就是是说,协议名称可是除了以上符号以外的所有字符都可以。我这个匹配比较宽泛,通常协议名称是字母,所以也可以写作([a-zA-Z])。除非确定邀请非常高的匹配精度,可以适当写宽泛一些。
  • []+,中括号后的 + 表示数量为 1~n 个,所以 ([^:/?#]+) 整个的意思是协议名称匹配为除了":"(冒号)、“?”(问号)和“#”(井号)以外的所有字符字符都可以,并且长度要求是1个以上。

(([^:/?#]+):)?,匹配协议名称加“:”格式,例如:http: 。当然,在介绍分组伪代码的时候,介绍过了,()? 括号后的 ? 标识整个协议分组是可选的。而之所以将协议分组作为可选的,是应为实际的应用中:

arduino

复制代码
  1. //www.yaohaixiao.com/favicon.ico

这种不带协议名称的 URL 地址也是允许的。

因此,(([^:/?#]+):)? 这段表达式将匹配 2 组数据:http: 和 http,前者是大分组 ()? 匹配的信息,后者则是子分组 ([^:/?#]+) 匹配的信息,也是真正希望解析的 URL 协议信息。不过由于整个协议分组是可选的,因此协议分组的两个分组也可能都匹配不到数据。

2. auth(授权信息分组)

csharp

复制代码
  1. // ((username):(password)@)?
  2. (([^/?#]+):(.+)@)?

([^/?#]+),匹配用户名,由于规则和匹配协议名称一样,在此就不重复了。

(.+),匹配密码。具体含义如下:

  • “.”,表示任何字符。因为密码由于考虑安全因数,一般都希望密码是包含字符(而且包含大小写),数组和特殊字符的组合。所以直接不做任何限制,允许密码包含任意字符。
  • “+”,表示数量为1个或者多个,即密码不能为空。

(([^/?#]+):(.+)@)?,匹配完整的授权信息。匹配的数据如:yao:Yao1!@。与授权信息一样,最外层的()?表示授权信息也是可选的。

因此,(([^/?#]+):(.+)@)? 整个会匹配 3 组数据:完整的用户授权分组信息、用户名以及密码。由于整个协议分组是可选的,因此授权分组的 3 组信息也可能都匹配不到数据。

3. hostname(服务器地址分组)

csharp

复制代码
  1. // (hostname)
  2. ([^/?#:]*)

([^/?#:]*),匹配服务器地址信息。和协议分组的表达式一样,使用了比较宽松的匹配逻辑。

4. port(端口分组)

scss

复制代码
  1. // (:(port))?
  2. (:(d+))?

(d+),匹配端口号信息。端口号只能是数字类型的数据,对端口号长度的要求是至少有一个。对端口号的长途匹配也没有使用太严苛的长度要求。虽然通常端口号的长度一般是 2 位数字起,但还是建议遵循之前提到的建议,如果不是有具体的精度要求,表达式都可以使用宽泛一些的匹配规则。

(:(d+))?,匹配完整的端口号分组信息。匹配的格式如:“:80”。

同样的,整个端口号分组匹配的表达式也是可以匹配 2 组数据::80 和 80。当然,端口号分组也是可选的,很大可能配备不到信息。

5. pathname(带层次的文件路径分组)

csharp

复制代码
  1. // (pathname)
  2. ([^?#]*)

([^?#]*),匹配带层次的文件路径信息。具体的含义是:

  • [^?#],除了“?”(问号)和“#”(井号)以外的所有字符都可以作为路径信息。
  • []*,表示字符长度可以是任意长度。因为 URL 地址可以是这样的:

arduino

复制代码
  1. http://www.yaohaixiao.com。

虽然没有使用“()?”的形式表示路径为可选的,但用于路径的长度可以为 0,其实路径也是可选的,也有可能匹配不到数据。

6. search(查询字符串分组)

csharp

复制代码
  1. // (?(search))?
  2. (?([^#]*))?

([^#]),匹配查询字符串信息。除了“#”(井号)以外的所有字符都可以作为查询字符串信息。[] 表示可选,因为路径:www.yaohxiao.com? 也是允许的。

(?([^#]*))?,匹配查询字符串的分组信息。匹配的格式如:?id=23。当然也是可选的。

整个查询字符串分组的表达式(?([^#]*))? ,也是可以匹配出 2 组数据。而因为整个分组是可选的,所以查询字符串的分组匹配也很可能匹配不到数据。

7. hash(片段标识符分组)

bash

复制代码
  1. // (#(hash))?
  2. (#(.*))?

(.),匹配片段标识。“.”表示任意字符,“”表示任意长度。即片段表示可以是任意字符,且长度为任意长度的。

(#(.*))?,匹配判断标识分组。匹配的格式如:#1234。看到()?,就知道片段标识符分组是可选的。

整个片段标识符分组的表达式(#(.*))? ,也可以匹配出 2 组数据。当然,也可能什么也匹配不上。

介绍完所有的分组表达式,最后来统计一下最多一共可以匹配多少组数据:2 + 3 + 1 + 2 + 1 + 2 + 2 + 1 = 14。其中,最后一个加1,是匹配的整个 URL 地址。

验证一下使用正则表达式对本文 URL 地址的匹配信息:

js

复制代码
  1. const URL = 'http://www.yaohaixiao.com/blog/how-to-parse-url-with-javascript/'
  2. const pattern = /^(([^:/?#]+):)?//(([^/?#]+):(.+)@)?([^/?#:]*)(:(d+))?([^?#]*)(?([^#]*))?(#(.*))?/
  3. const matches = URL.match(pattern)
  4. console.log(matches)

输出的结果为:

makefile

复制代码
  1. 0: "http://www.yaohaixiao.com/blog/how-to-parse-url-with-javascript/" 1: "http:"
  2. 2: "http"
  3. 3: undefined
  4. 4: undefined
  5. 5: undefined
  6. 6: "www.yaohaixiao.com"
  7. 7: undefined
  8. 8: undefined
  9. 9: "/blog/how-to-parse-url-with-javascript/"
  10. 10: undefined
  11. 11: undefined
  12. 12: undefined
  13. 13: undefined
  14. groups: undefined
  15. index: 0
  16. input: "http://www.yaohaixiao.com/blog/how-to-parse-url-with-javascript/"

正如之前人工分析的一样,使用 match() 方法匹配了 14 个结果。由于示例 URL 地址中很多可选的信息都是没有的,所以匹配结果为 undefined。但这个结果并不是那么一目了然,让我们看看完整的 parseURL() 方法。

完整的 parseURL() 方法

完整的 parseURL() 方法的如下:

js

复制代码
  1. /**
  2. * 分析 url 地址,将解析的结果作为对象返回,返回属性有:
  3. * 1. href - 完整 URL 地址
  4. * 2. protocol - 协议
  5. * 3. username - 用户名
  6. * 4. password - 密码
  7. * 5. host - 域名地址
  8. * 6. hostname - 域名名称
  9. * 7. port - 端口号
  10. * 8. path - 路径
  11. * 9. pathname - 路径名
  12. * 10. search - 查询参数
  13. * 11. hash - 哈希值
  14. * ====================================================
  15. * @param {String} url - URL地址
  16. * @returns {Object}
  17. */
  18. const parseURL = (url) => {
  19. const pattern = /^(([^:/?#]+):)?//(([^/?#]+):(.+)@)?([^/?#:]*)(:(d+))?([^?#]*)(?([^#]*))?(#(.*))?/
  20. const matches = url.match(pattern)
  21. return {
  22. href: url,
  23. origin: matches[1] + matches[2],
  24. protocol: matches[2] || '',
  25. username: matches[4] || '',
  26. password: matches[5] || '',
  27. host: matches[6] + (matches[7] ? matches[7] : ''),
  28. hostname: matches[6],
  29. port: matches[8] || '',
  30. path: matches[9] + matches[10],
  31. pathname: matches[11],
  32. search: matches[10] || '',
  33. hash: matches[13] || ''
  34. }
  35. }

它返回一个对象,将正则表达式匹配的信息复制给具体的 URL 名称的属性。看看使用 parseURL() 方法解析前面的 URL 地址的结果吧:

js

复制代码
  1. const URL = 'http://www.yaohaixiao.com/blog/how-to-parse-url-with-javascript/'
  2. const result = parseURL(URL)

解析后的结果:

json

复制代码
  1. {
  2. hash: undefined,
  3. host: "www.yaohaixiao.com",
  4. hostname: "www.yaohaixiao.com",
  5. href: "http://www.yaohaixiao.com/blog/how-to-parse-url-with-javascript/",
  6. orgin: "http://www.yaohaixiao.com",
  7. password: undefined,
  8. path: "/blog/how-to-parse-url-with-javascript/undefined",
  9. pathname: undefined,
  10. port: undefined,
  11. protocol: "http",
  12. search: undefined,
  13. username: undefined,
  14. }

现在解析后的结果是不是一目了然了?

URL 构造函数解析

除了前文介绍的使用 JavaScript 中的正则表达式解析 URL 信息之外,还可以利用新的 URL 构造函数来解析 URL 地址,并且解析起来更加简单。

URL() 构造函数

URL() 构造函数返回一个新创建的 URL 对象,表示由一组参数定义的 URL。如果给定的基本 URL 或生成的 URL 不是有效的 URL 链接,则会抛出一个 TypeError。

语法如下:

js

复制代码
  1. new URL(url [, base]);
  • url:是一个表示绝对或相对 URL 的 DOMString。如果url 是相对 URL,则会将 base 用作基准 URL。如果 url 是绝对URL,则无论参数base是否存在,都将被忽略;
  • base:可选,是一个表示基准 URL 的 DOMString,在 url 是相对 URL 时,它才会起效。如果未指定,则默认为 '';

调用方法如下:

js

复制代码
  1. // 直接使用绝对 URL 地址方式调用
  2. const url = new URL('http://example.com/path/index.html');
  3. // 使用 path 加 base 地址参数的方式调用
  4. const url = new URL('/path/index.html', 'http://example.com');

URL() 构造函数的接口信息如下:

js

复制代码
  1. interface URL {
  2. href: USVString;
  3. protocol: USVString;
  4. username: USVString;
  5. password: USVString;
  6. host: USVString;
  7. hostname: USVString;
  8. port: USVString;
  9. pathname: USVString;
  10. search: USVString;
  11. hash: USVString;
  12. // 只有 orgin 和 searchParams 是只读,其余的属性都是可修改的
  13. readonly origin: USVString;
  14. readonly searchParams: URLSearchParams;
  15. toJSON(): USVString;
  16. }

所以每个使用 URL() 构造函数创建的实例,都会返回完整 URL 信息了。例如:

js

复制代码
  1. const url = new URL('http://www.yaohaixiao.com/blog/how-to-parse-url-with-javascript/');

返回的数据为:

json

复制代码
  1. {
  2. hash: "",
  3. host: "www.yaohaixiao.com",
  4. hostname: "www.yaohaixiao.com",
  5. href: "http://www.yaohaixiao.com/blog/how-to-parse-url-with-javascript/",
  6. origin: "http://www.yaohaixiao.com",
  7. password: "",
  8. pathname: "/blog/how-to-parse-url-with-javascript/",
  9. port: "",
  10. protocol: "http:",
  11. search: "",
  12. searchParams: URLSearchParams {},
  13. username: ""
  14. }

可以看到,使用 URL() 构造函数返回的数据和前文使用正则表达式解析的数据基本一致,只是这里多了一个 searchParams 对象。

可以看到,使用 URL() 构造函数返回的数据和前文使用正则表达式解析的数据基本一致,只是这里多了一个 searchParams 对象。

searchParams 对象又是 URLSearchParams 对象的一个实例,用来获取查询字符串中的某个参数的值,用法如下:

js

复制代码
  1. const url = new URL('http://www.yaohaixiao.com/blog/how-to-parse-url-with-javascript/?id=312');
  2. url.searchParams.get('id') // -> 123

URL() 构造函数的功能是不是很强大了。不知道 URL() 构造函数浏览器支持的情况怎么样?

URL() 构造函数的浏览器兼容情况

屏幕截图 2021-06-01 104114.png

在主流浏览器中,除了 IE 浏览器,其余的都基本支持了。基本上可以放心使用 URL() 构造函数来解析 URL 信息。

正则表达式解析 VS URL 构造函数解析

对两种解析 URL 信息的方法进行比较,很明显使用 URL() 构造函数解析的方法操作更加简单,并且提供更多的功能。但与正则表达式解析方法比较,可能唯一不足的就是在浏览器兼容性方面稍差。

不过 URL() 有个问题是需要注意的,就是 URL 字符串的格式不是正确的格式的时候会报错。例如前文提到的这种 URL 地址:

arduino

复制代码
  1. new URL('//https://juejin.cn/editor/drafts/')

7.png

其实,只要稍微调整一下,就可以将两种方法结合起来,在支持 URL() 构造函数的浏览器中使用构造函数,不知支持的时候则使用正则表达式解析:

js

复制代码
  1. /**
  2.  * 分析 url 地址,将解析的结果作为对象返回,返回属性有:
  3.  * 1. href - 完整 URL 地址
  4.  * 2. orgin - 网站首页地址
  5.  * 3. protocol - 协议
  6.  * 4. username - 用户名
  7.  * 5. password - 密码
  8.  * 6. host - 域名地址
  9.  * 7. hostname - 域名名称
  10.  * 8. port - 端口号
  11.  * 9. path - 路径
  12.  * 10. pathname - 路径名
  13.  * 11. search - 查询参数
  14.  * 12. hash - 哈希值
  15.  * ====================================================
  16.  * @param {Stringurl - URL地址
  17.  * @returns {Object}
  18.  */
  19.  function parseURL (url) {
  20.   var pattern = /^(([^:/?#]+):)?//(([^/?#]+):(.+)@)?([^/?#:]*)(:(d+))?([^?#]*)(?([^#]*))?(#(.*))?/
  21.   var matches = url.match(pattern)
  22. try {
  23. // 支持 URL() 构造函数,且可以正确转义 URL 字符串
  24. return new URL(url)
  25. } catch(e) {
  26. // 否则使用正则表达式解析
  27. return {
  28.       href: url,
  29.       origin: matches[1] + matches[2],
  30.       protocol: matches[2] || '',
  31.       username: matches[4] || '',
  32.       password: matches[5] || '',
  33.       host: matches[6] + (matches[7] ? matches[7] : ''),
  34.       hostname: matches[6],
  35.       port: matches[8] || '',
  36.       path: matches[9] + matches[10],
  37.       pathname: matches[11],
  38.       search: matches[10] || '',
  39.       hash: matches[13] || ''
  40.     }
  41. }
  42.  }

零
  • 转载请务必保留本文链接:https://www.0s52.com/bcjc/javascriptjc/16619.html
    本社区资源仅供用于学习和交流,请勿用于商业用途
    未经允许不得进行转载/复制/分享

发表评论