首页 前端知识 (简单详细)javascript中new url()属性,轻松解析url地址

(简单详细)javascript中new url()属性,轻松解析url地址

2024-01-26 00:01:54 前端知识 前端哥 440 788 我要收藏

目录

背景

前言

new URL()

博主絮叨 


背景

我们在日常开发中经常会遇到要对url中的参数进行修改和新增,但是自己手动每次敲就会导致代码很麻烦,且不易维护

前言

以前写过两次次解析url的并且对url的应用场景做了深层挖掘 (个人感觉,没有这个帖子好用,因为以前是正则表达式来进行的,但是思路对下面的方法同样适用)


JS解析url中的参数__揽的博客-CSDN博客

(巨好使,详细,解析URl,URl自定义传参)js URl中快速自定义传参,并且实现参数解析 修改 和新增,替换功能_自定义url协议 传参__揽的博客-CSDN博客


new URL()

首先写一个假的地址(q=URLUtils.searchParams&topic=api)相当于当前的window.location.href

const urlParams = new URL(window.location.href);//将字符串变成url对象
urlParams.searchParams.has("topic") === true; // true //判断url是否存在这个key值
urlParams.searchParams.get("topic") === "api"; // true //获取这个key值的value
urlParams.searchParams.getAll("topic"); // ["api"] //获取url所有的key
urlParams.searchParams.get("foo") === ""; // true //key值为空的情况
urlParams.searchParams.append("topic", "webdev"); //url追加一个key-value
urlParams.searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
//将参数对象转为字符串并且进行了拼接
urlParams.searchParams.set("topic", "More webdev"); //设定key-value
urlParams.searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
urlParams.searchParams.delete("topic"); //删除key-value
urlParams.searchParams.toString(); // "q=URLUtils.searchParams"

博主絮叨 

这个方法比前两个博客中的正则更实用,但是前两个博客的思路一定可以多看看

转载请注明出处或者链接地址:https://www.qianduange.cn//article/374.html
标签
开发语言
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!