获取URL params

通常获取url后面的参数使用分割或正则
字符串分割

//字符串分割
let url = 'http://www.domain.com/?user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC';const parseParam = (url)=>{const params = url.split('?')[1].split('&')console.log(params) /**[* 'user=anonymous',* 'id=456',* 'city=%E5%8C%97%E4%BA%AC',]*/let obj = {}//for in 遍历for (item in params){obj[params[item].split('=')[0]] = params[item].split('=')[1]}//forEarch||map遍历params.forEach(item => {obj[item.split('=')[0]] = item.split('=')[1]});console.log(obj) /*{ user: 'anonymous', id: '456', city: '%E5%8C%97%E4%BA%AC' }*/ (%E5%8C%97%E4%BA%AC 可使用 UrlDecode 转码)
}parseParam(url)

正则

let url = 'http://www.domain.com/?user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC';const parseParam = (url)=>{let r = /\?(.+)/glet re = /(.+)&(.+)&(.+)/g //需根据参数调整 或直接使用 split 分割let arr = []let o = r.exec(url)[1]console.log(o) //user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AClet ob = re.exec(o)arr.push(ob[1],ob[2],ob[3])console.log('ob',ob,'arr',arr) /*ob ['user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC','user=anonymous','id=456','city=%E5%8C%97%E4%BA%AC',index: 0,input: 'user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC',groups: undefined] arr [ 'user=anonymous', 'id=456', 'city=%E5%8C%97%E4%BA%AC' ]*/let obj = {}arr.forEach(item => {obj[item.split('=')[0]] = item.split('=')[1]});for (item in arr){obj[arr[item].split('=')[0]] = arr[item].split('=')[1]}console.log(obj)//{ user: 'anonymous', id: '456', city: '%E5%8C%97%E4%BA%AC' }}parseParam(url)

正则改

const parseParam = (url)=>{let r = /\?(.+)/glet o = r.exec(url)[1]console.log(o) //user=anonymous&id=456&city=%E5%8C%97%E4%BA%AClet arr = o.split('&')let obj = {}arr.forEach(item => {obj[item.split('=')[0]] = item.split('=')[1]});for (item in arr){obj[arr[item].split('=')[0]] = arr[item].split('=')[1]}console.log(obj)//{ user: 'anonymous', id: '456', city: '%E5%8C%97%E4%BA%AC' }}parseParam(url)

现在新版浏览器提供了两个API可以直接获取

searchParams

//searchParams
let url = 'http://www.xxx.com/?user=lili&id=456&city=%E5%8C%97%E4%BA%AC';const parseParam = (url)=>{let o =(new URL(url)).searchParamsconsole.log(o) // URLSearchParams {// 'user' => 'anonymous',//    'id' => '456',//    'city' => '北京',//}for(item of o){console.log(item) //[ 'user', 'anonymous' ]//[ 'id', '456' ]//[ 'city', '北京' ]}}parseParam(url)

URLSearchParams

//URLSearchParams
let url = 'http://www.domain.com/?user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC';const parseParam = (url)=>{const params = url.split('?')console.log(params)// URLSearchParams {//    'http://www.xxx.com/?user' => 'anonymous',//    'id' => '456',//    'city' => '北京',//} （使用node环境测试结果）let obj = new URLSearchParams(params[1])console.log(obj) // URLSearchParams {// 'user' => 'anonymous',//    'id' => '456',//    'city' => '北京',//}（使用node环境测试结果）for(item of obj){console.log(item) //[ 'user', 'anonymous' ]//[ 'id', '456' ]//[ 'city', '北京' ]}}parseParam(url)

获取URL params相关推荐

html的子页面获取自己url,如何从html页面获取url参数并将其显示在textarea中？
我用下面的在我的HTML页面的JavaScript功能,我想没有textarea的任何连接操作正常显示参数....如何从html页面获取url参数并将其显示在textarea中? function g ...
如何获取URL中的参数
获取URL中的参数 1. 使用JS函数获取URL参数使用示例 2. Angular应用中,从URL中获取参数信息的方法使用示例 ActivatedRoute属性 1. 使用JS函数获取URL参数 ...
js获取url中的参数,url中传递中文的时候通过js解码的方式
如果传递的参数是: <a href="${pageContext.request.contextPath}/productdisplay/productDisplay_productD ...
php解析url并得到url中的参数及获取url参数的四种方式
本文给大家介绍php解析url并得到url中的参数及获取url参数的四种方式,涉及到将字符串参数变为数组,将参数变为字符串的相关知识,本文代码简单易懂,感兴趣的朋友一起看看吧下面一段代码是php解析 ...
ASP.NET后台获取url
站在服务器磁盘上的物理路径: HttpRuntime.AppDomainAppPath 虚拟程序路径: HttpRuntime.AppDomainAppVirtualPath 任何于Request/H ...
react获取URL中参数
这个问题想必很多人都会遇到过,这里我说一下怎么获取URL中的参数. react 获取URL原理: 在 react 组件的 componentDidMount 方法中打印一下 this.props,在浏 ...
javaScript获取url中的参数
var urlTools = {//获取RUL参数值getUrlParam: function(name) { /*?videoId=identification */var params = dec ...
express中获取url参数
问号传参获取参数获取 http://127.0.0.1:3001/user?id=10&name=zs 中的查询参数: 直接使用 req.query 获取参数即可: 注意:URL 地址栏中通 ...
[react-router] React-Router怎么获取URL的参数？
[react-router] React-Router怎么获取URL的参数? 通过params 类组件:在保证props能获取到路由信息的前提下(如果不是直接嵌套在<Route/>下,需要 ...

获取URL params

searchParams

URLSearchParams

获取URL params相关推荐

最新文章

热门文章