如何在JavaScript和Node.js里解析URL及参数?

在编程的时候,我们有时候需要拿到URL并解析里面的参数,这种情况下,需要有个简单的办法来解析URL。

在以往,我们可能习惯用第三方的库来做这件事情,比如jquery或者parse-url之类的库,好处是这类库大家都熟悉,很容易找到使用的文档,能够快速地解决问题。

不过随着大而全的库(如jquery, AngularJS)日趋弱势,像React、Vue等专注于解决某一方面问题的库日益更加流行,框架里面并不会自带URL解析之类的功能,如果再额外引入一个第三方的库来解析URL,反而变得有点笨重了。不过,习惯归习惯,实际上我们可以利用浏览器/Node.js原始的方法来解决这个问题,而不必依赖第三方的库。

解析URL

解析URL的话,可以使用URL类:

const url = new URL('https://www.lema.fun/post?page=1#abc');
// 或者采用这个形式
// url = new URL('/post?page=1#abc', 'https://www.lema.fun');
/*
url对象的属性是
{
    hash: "#abc",
    host: "www.lema.fun",
    hostname: "www.lema.fun",
    href: "https://www.lema.fun/post?page=1#abc",
    origin: "https://www.lema.fun",
    password: "",
    pathname: "/post",
    port: "",
    protocol: "https:",
    search: "?page=1",
    username: "",
    searchParams: URLSearchParams
}
*/

这样,只要一行代码就可以拿到解析后的url对象了。

需要注意的是URL类的构造函数里需要填一个完整的URL,否则会抛Invalid URL的异常。

可以看到URL里完整的内容都已经被解析出来了。当然我们会更关注URL里search的部分,因为这个部分经常会带一些需要用到的参数。在url对象里,我们注意到有searchParams这样一个属性,类型是URLSearchParams。这个对象提供了对urlsearch部分参数的操作。

解析参数

URLSearchParams类可以用来解析URL里search部分的参数。可以从URL对象里取得这个对象url.searchParams,或者直接用URLSearchParams类来新创建一个对象。

这样,很容易就解析出了search部分的参数了。

URLSearchParams类强大的部分不仅仅是在解析参数上,还可以对参数进行增删查改、遍历等操作。

兼容性

URL和URLSearchParams类, 在新的浏览器内核中都普遍实现了,所以除非要兼容老的IE浏览器,基本上都是可以放心用的。