js中获取url中查询参数的3种办法 |
您所在的位置：网站首页 › js获取网页链接 › js中获取url中查询参数的3种办法 |
js中获取url中查询参数的3种办法
|
前端中，获取url中的查询参数是我们经常遇到的问题，下面就列出3种获取查询参数的方法： 第一种:通过正则表达式匹配参数（markdown编辑器js注释颜色太暗，故下面汉字需要加 "//"改成js注释在运行） function regExpQuery(name){ 从索引1处开始截取，即舍弃掉"？" let search = location.search.substring(1) 通过正则表达式匹配，例如 ： a=10&b=70&password=90 注意看下面的正则表达式: （一）、(^|&) 匹配的是开始或者是&，如上a前面的空字符开始，和b前面的&符号 （二）、${name} 是一个模板字符串，匹配的是我们传递进来的name （三）、([^&]*)第二个分组指定匹配的字符不能是&的一个或多个字符，如上，匹配的是10,70,90，但是仅这样还不行，还没有结尾 （四）、(&|$)第四个分组指定我们查询参数的结尾，是以&结尾或者是结尾，没有这个分组，我们的参数结不了尾。 比如a=10这里以&结尾，匹配到10；b=70匹配到70，以&结尾；password=90匹配到是是字符的结尾，后面没有内容，所以匹配到90 let reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`) let result = search.match(reg) if(result == null){ return null }else{ 这里之所以是索引2，是因为上面的正则表达式中我们真正要返回的查询参数值是第2对小括号中的内容，索引0处返回的是整个匹配的正则表达式对象 return result[2] } } console.log(regExpQuery("articleId")) 二、使用新的API：
URLSearchParams（但是因为是新的api，所以有兼容性问题，要做兼容处理,可以结合上面的第一种方法做兼容） 这是mdn中关于URLSearchParams做出的解释 这里以一个字符串为例 let params = "?username=admin&password=admin123" let usp = new URLSearchParams(params) for(let key of usp){ console.log(key) console.log(`${key[0]}=${key[1]}`) }得到如下的输出结果： 则是使用普通的字符串操作： function handlerQuery(name,queryStr=""){ if(queryStr == null){ return null } // 以？截取字符串返回一个数组，数组的第一项为？前的数据，数据第2项为？后的数据 let query = queryStr.split("?")[1] let queryList = query.split("&") for(let key of queryList){ // console.log(key) // username=admin password=admin123 if(key.split("=")[0] === name){ return key.split("=")[1] } } } handlerQuery("password","[email protected]")输出结果如下： |
每一个key都是一个包含查询参数key和value的数组。
以上就是获取url查询参数的其中3种方法了，相比较之下：【本文地址】
今日新闻 |
推荐新闻 |