首页 > 编程语言 >JavaScript url参数的读取、添加和修改

JavaScript url参数的读取、添加和修改

时间:2022-12-04 15:11:06浏览次数:69  
标签:读取 val url JavaScript param token let paramName

在实际业务中, 需要对一长串的url进行解析,比如读取、添加或修改url中的queryString。

1. 获取url中的参数

/**
 * 获取url内query string的值
 * @param {String} url 网址
 * @param {String} paramName queryString name
 */
 function getUrlParamByName(url, paramName) {
  paramName = paramName.replace(/[\[\]]/g, '\\$&');
  let regular = new RegExp('[?&]' + paramName + '(=([^&#]*)|&|#|$)');
  let val = regular.exec(url);
  if (!val) {
    return null;
  }
  if (!val[2]) {
    return '';
  }
  return decodeURIComponent(val[2].replace(/\+/g, ' '));
}

示例:

let url = 'http://wwww.baidu.com/search?userId=6453705&token=b1d710d376498dd803e4e7a01e5932ef';

// 获取token
let token = getUrlParamByName(url, 'token');
console.log(token); // => b1d710d376498dd803e4e7a01e5932ef

  

2. 设置url中的参数

 说明:若当前url不存在此queryString,则进行追加操作。

/**
 * 设置url内query string的值
 * @param {String} url 网址
 * @param {String} paramName queryString name
 * @param {String} paramValue queryString value
 */
function setUrlParam(url, paramName, paramValue) {
  paramName = paramName.replace(/[\[\]]/g, '\\$&');
  let regular = new RegExp('[?&]' + paramName + '(=([^&#]*)|&|#|$)');
  let val = regular.exec(url);
  if (val && val[2]) {
    url = url.replace(new RegExp(paramName + '=' + val[2]), `${paramName}=${paramValue}`);
  } else {
    url += `&${paramName}=${paramValue}`;
  }

  return url;
}

示例:

let url = 'http://wwww.baidu.com/search?userId=6453705&token=b1d710d376498dd803e4e7a01e5932ef';

// 设置token
let newUrl = setUrlParam(url, 'token', '123');
console.log(newUrl); // => http://wwww.baidu.com/search?userId=6453705&token=123

// 若不存在queryString,进行追加操作
newUrl = setUrlParam(url, 'dt', Date.now());
console.log(newUrl); // => http://wwww.baidu.com/search?userId=6453705&token=b1d710d376498dd803e4e7a01e5932ef&dt=1669009911762

 

3. 清除url内指定的参数

说明:用于清除url中指定的queryString。

/**
 * 清除url内指定的param
 * @param {String} url 网址
 * @param {Array | String} paramNameList queryString name array
 */
function clearUrlParam(url, paramNameList) {
  if (!Array.isArray(paramNameList)) {
    paramNameList = [].concat(paramNameList);
  }

  paramNameList.forEach((paramName) => {
    paramName = paramName.replace(/[\[\]]/g, '\\$&');
    let regular = new RegExp('[?&]' + paramName + '(=([^&#]*)|&|#|$)');
    let val = regular.exec(url);
    if (val && val[2]) {
      url = url.replace(new RegExp('&?' + paramName + '=' + val[2]), '');
    }
  });

  if (url.endsWith('?')) {
    url = url.substring(0, url.length - 1);
  }

  return url;
}

示例:

let url = 'http://wwww.baidu.com/search?userId=6453705&token=b1d710d376498dd803e4e7a01e5932ef';

// 清除token
let newUrl = clearUrlParam(url, 'token');
console.log(newUrl); // => http://wwww.baidu.com/search?userId=6453705

// 清除多个
newUrl = clearUrlParam(url, ['userId', 'token']);
console.log(newUrl); // => http://wwww.baidu.com/search

 

 

End Web开发之路系列文章 菜单加载中...

 

标签:读取,val,url,JavaScript,param,token,let,paramName
From: https://www.cnblogs.com/polk6/p/16903944.html

相关文章

  • 【web】自定义协议Protocol URL
    URLProtocol(自定义协议)可以让web页面调用本地exe程序,这个神奇的功能是怎么实现的呢?URLProtocolURLProtocol,没错就是标题里所说的自定义协议。这玩意儿大家最常见的比如......
  • [Javascript Performance] Optimisation and deoptimization
    Theoptimizingcompileroptimizesforwhatit’sseen.Ifitseessomethingnew,that’sproblematic. Seletingpropertieshassomestrangeimplicationsonpe......
  • [Javascript Performance] How to benchmark code performance
    Code:benchmark.jsconst{performance}=require('perf_hooks');//SETUP......
  • shell读取配置文件中的参数
    shell读取配置文件中的参数配置文件配置文件config.properties如下:user=bkage=25ip=192.168.37.1 一、使用cat+awk语句过滤并赋值变量user=`catconfig.proper......
  • #yyds干货盘点#JavaScript 网页异常捕获
    一、异常大概分类一般我们想要捕获的异常大概分类:语法错误onerror事件代码块与​​语法错误代码块​​不在一起,例如trycatche或者同在一个代码块,但是​​语法错误代码块​......
  • 读《你不知道的JavaScript》
    读《你不知道的JavaScript》Part1作用域与闭包词法作用域定义在词法阶段的作用域。换句话说,词法作用域就是由你在写代码时将变量和块作用域写在哪里来决定的。词......
  • 16.读取TXT中内容放到列表中
    #操作思路:#1.打开指定的TXT#2.读取TXT中的内容#3.处理数据#4.将内容存放在数组中#5.打印数组中的数据defprint_hi(name):print(f'Hi,{name}')wit......
  • Javascript随机排列数组-要求概率一样
    今天做了一道很有意思的题。如何在Js中实现一个随机排列数组的算法,要求排列之后每一次组合出现的概率相同。完整题目如下:etarr=[1,2,3];shuffle(arr);//arr=[3......
  • JavaScript入门④-万物皆对象:Object
    01、Object对象Object是JavaScript的一种数据类型,它用于存储各种键值集合和更复杂的实体,是一组数据和功能的集合。JS中几乎所有对象都是继承自Object,Array、RegExp、......
  • uni 结合vuex 编写动态全局配置变量 this.baseurl
    在日常开发过程,相信大家有遇到过各种需求,而我,在这段事件便遇到了一个,需要通过用户界面配置动态接口,同时,因为是app小程序开发,所以接口中涉及到了http以及websocket两个类型......