在实际业务中, 需要对一长串的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