前端中对 url 的一些常用操作

蚊子前端博客
发布于 2022-02-24 09:35
我们平时操作 url 也比较多,如获取 url 中的参数,拼接 url 等,这里我们简单汇总下对 url 的常用操作。

我们平时操作 url 也比较多,如获取 url 中的参数,拼接 url 等,这里我们简单汇总下对 url 的常用操作。

1. 获取 url 中的参数

现在浏览器已经支持URLSearchParams对象了,我们可以直接用该方法获取参数。而且该方法的浏览器兼容性也非常好:

COPYJAVASCRIPT

// 获取当前url中的参数 const getQueryString = (name) => { const searchParams = new URLSearchParams(location.search); return searchParams.get(name); };

若您的项目要兼容的范围更广,可以参考这篇文章中的方法:javascript 获取 URL 链接和 js 链接中的参数

2. 获取 url 的域名、路径、referer 等

以前我们要获取一个 url 其中的某一部分,还得创建一个a标签来进行解析,如使用 DOM 中的 a 标签解析 url这篇文章中讲解到的。

不过现在浏览器也提供了URL对象,获取 url 的某一部分也更简便了。

若只给 URL 传入一个参数,这个 url 必须是绝对地址,即需要携带协议,如 http://, https://, file://等;若不确定第一个参数中是否携带协议和主机信息,我们可以使用第二个参数进行补充。

若我们不确定要解析的参数是不是绝对地址,那就传第 2 个参数进行备用,如:

COPYJAVASCRIPT

const param = '/post/nodejs/nodejs-http-getquery-qwurz4.html?nick=wenzi'; // 若param是绝对地址,则直接使用,否则用第2个参数进行拼接 // 若拼接后依然不是绝对地址,则抛出TypeError异常 const uu = new URL(param, 'http://localhost'); console.log(uu);

执行后的结果(host 与 hostname 字段的区别:若链接中有端口时,host 字段会拼接上端口;如端口为 8080 时,则 host 字段为localhost:8080,hostname 为localhost):

new-url-蚊子的前端博客

解析后,获取 hostname, path 等就非常方便了,不受其他字段的干扰。

具体使用,也可以参考文章如何在 nodejs 的原生 http 服务中获取请求参数

3. 修改 URL 的某一部分

对于一个完整的 URL,有时候我们只想修改其中的某一部分,而不影响其他部分,这个怎么处理呢?

比如我们要把链接路径(pathname)中所有的字符a改为字符b,若使用正则的话,则可能把参数和 hash 路由中的字符也给替换掉。或者把当前链接中所有的参数,然后跳转到下一个链接。

先把 url 拆分,再进行拼装,其实也可以,但并不是最好的方案。这里用URL的实例化对象,直接更新某一部分,然后最后返回.href属性即可。

COPYJAVASCRIPT

const replaceUrlPath = (url: string) => { const uu = new URL(url, 'http://localhost'); uu.pathname = uu.pathname.replace(/a/g, 'b'); // 对url的某一部分进行处理 return uu.href; }; replaceUrlPath('https://www.xiabingbao.com/post/javascript/url-handler-r7scei.html?a=b#main?c=123'); // https://www.xiabingbao.com/post/jbvbscript/url-hbndler-r7scei.html?a=b#main?c=123

4. 判断 url 地址是否为绝对地址

我们在这里简单地认为只要 url 有协议,它就是绝对地址,无论是什么协议(双斜杠//也算作绝对地址):

COPYJAVASCRIPT

const isAbsolute = (url) => /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url);

运行的结果:

COPYJAVASCRIPT

isAbsolute('http://localhost'); // true isAbsolute('https://localhost'); // true isAbsolute('file://localhost'); // true isAbsolute('qqnews://localhost'); // true isAbsolute('//localhost'); // true isAbsolute('/api/list'); // false

5. 拼接 URL

拼接 url 时,尤其要注意前后的斜杠/

COPYJAVASCRIPT

/** * Creates a new URL by combining the specified URLs * * @param {string} baseURL The base URL * @param {string} relativeURL The relative URL * @returns {string} The combined URL */ const combineURLs = (baseURL, relativeURL) => { // 将baseURL最后的斜杠和relativeURL最前面的斜杠去掉 return relativeURL ? `${baseURL.replace(/\/+$/, '')}/${relativeURL.replace(/^\/+/, '')}` : baseURL; };

使用:

COPYJAVASCRIPT

combineURLs('https://www.xiabingbao.com/post/', '/request/axios-some-utils.html'); // 得到: https://www.xiabingbao.com/post/request/axios-some-utils.html

我们在这里仅仅是进行简单的拼接,并不保证拼接后的 url 的合法性。

6. http 协议转成 https

这里用正则判断下就可以,若是以http://开头的,则替换成https://

COPYJAVASCRIPT

/** * 将http链接转换为https链接 * @param url 要转换的http链接 */ const http2https = (url: string): string => { // 若不是以 http:// 开头,则原样返回 return url.replace(/^http:\/\//, 'https://'); };

7. encodeURI 和 encodeURIComponent 的区别

encodeURI 和 encodeURIComponent 的区别在于前者被设计来用于对完整 URL 进行 URL Encode,于是 URL 中的功能字符,比如&, ?, /, =等等这些并不会被转义;而后者被设计来对一个 URL 中的值进行转义,会把这些功能字符也进行转义。

escape 和 unescape 两个方法已被废弃,应当避免使用。

我们看着例子:

COPYJAVASCRIPT

const url = 'https://www.xiabingbao.com/post/react/nextjs-server-client-build-qxpzwi.html#1. 只在浏览器端使用的模块'; encodeURI(url); // https://www.xiabingbao.com/post/react/nextjs-server-client-build-qxpzwi.html#1.%20%E5%8F%AA%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AB%AF%E4%BD%BF%E7%94%A8%E7%9A%84%E6%A8%A1%E5%9D%97 encodeURIComponent(url); // https%3A%2F%2Fwww.xiabingbao.com%2Fpost%2Freact%2Fnextjs-server-client-build-qxpzwi.html%231.%20%E5%8F%AA%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AB%AF%E4%BD%BF%E7%94%A8%E7%9A%84%E6%A8%A1%E5%9D%97

encodeURI 编译后的 url 可以正常访问,而 encodeURIComponent 编译后的字符串大部分都是作为参数。

encodeURI-encodeURIComponent-蚊子的前端博客

标签:
阅读(510)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆