手写系列 # 1:实现 getQueryString 方法获取 URL 上的参数值

简介: 手写系列 # 1:实现 getQueryString 方法获取 URL 上的参数值

实现

function getQueryString(url, name) {
  let index = url.indexOf('?');
  console.log('?', index); // ? 30
  // 需要判断是否存在 ?
  if(index === -1){
    return undefined;
  }
  // 将 ? 后面的参数分割成 type=blog 这样的数组
  let paramsArr = url.substring(index + 1).split('&');
  console.log(paramsArr); // ["type=blog", "name=kaimo"]
  // 遍历 paramsArr 
  for(let i = 0; i < paramsArr.length; i++) {
    // 每个元素用 = 分割
    let paramsItem = paramsArr[i].split('=');
    // 找到 name 并返回值
    if(paramsItem[0] === name) {
      return paramsItem[1];
    }
  }
}
// 测试
console.log(getQueryString('https://blog.csdn.net/kaimo313?type=blog&name=kaimo', 'name')); // kaimo




fa970d0b72ca42b59f3ac243208c0d6f.png







目录
相关文章
|
1月前
|
前端开发 JavaScript
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
60 0
|
11月前
|
XML JSON 缓存
Java实现根据商品短连接(真实URL)获取1688商品详情用数据API方法
Java实现根据商品短连接(真实URL)获取1688商品详情用数据API方法
179 0
|
2天前
|
域名解析 存储 缓存
HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口
【6月更文挑战第23天】 HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口;TCP连接(HTTP/1.1可能需排队);三次握手;发送请求头与体;服务器处理并返回响应;TCP连接可能关闭或保持;浏览器接收并显示响应,更新缓存。HTTP版本间有差异。
13 5
|
1月前
|
JavaScript 前端开发
javascript获取url信息的常见方法
javascript获取url信息的常见方法
27 2
|
1月前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。
|
1月前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
9月前
|
JavaScript
js获取 url 参数值的方法总结
js获取 url 参数值的方法总结
117 0
|
1月前
|
JavaScript
vue项目中统一管理多个后端URL的方法
vue项目中统一管理多个后端URL的方法
58 0
|
1月前
|
JavaScript 小程序
vue获取URL参数 ,正则 JS-获取URL指定参数的 3 种方法
vue获取URL参数 ,正则 JS-获取URL指定参数的 3 种方法
|
1月前
|
Python
Python-URL编码和URL解码方法
Python-URL编码和URL解码方法
67 0