本文共 4182 字，大约阅读时间需要 13 分钟。

URL.searchParams 实现

方案一

核心逻辑

(new URL(document.location)).searchParams.get('paramName');

写个类

class UrlParam{
   	constructor(){
   		this.params = (new URL(document.location)).searchParams;	}	get(name){
   		return this.params.get(name);	}}var urlParam = new UrlParam();urlParam.get('paramName');

方案二

核心逻辑

Object.fromEntries(new URLSearchParams(location.search))['paramName'];

写个类

class UrlParam{
   	constructor(){
   		this.params = Object.fromEntries(new URLSearchParams(location.search));	}	get(name){
   		return this.params[name];	}}var urlParam = new UrlParam();urlParam.params;urlParam.get('paramName');

从url获取参数及页面名称

window.Jerry = {
     getUrlParam : function (name) {
       /**     * 从url获取参数     * 1、传入参数名（字符串），返回对应参数值     * 2、传入任意 object 返回 整个参数 object     * 3、不传参数，返回参数object 的 keys     * 如果找不到返回空字符串     */    var param = null;    try{
         //多次替换版      //param = JSON.parse('{"'+window.location.search.substr(1).replace(/=/g,'":"').replace(/&/g,'","')+'"}');      //正则+箭头函数版 (正则匹配到的字符，每个都会传给后面的函数来替换，其中做了=和&的判断)      //param = JSON.parse('{"'+ window.location.search.substr(1).replace(/(=|&)/g, m=>({"=": '":"', "&": '","'}[m]))  +'"}');      //正则+匿名函数版 (正则匹配到的字符，每个都会传给后面的函数来替换，其中做了=和&的判断)      param = JSON.parse('{"'+ window.location.search.substr(1).replace(/(=|&)/g, function(m){
   return {
   "=": '":"', "&": '","'}[m]})  +'"}');    }catch(e){
    console && console.error && console.error('没有参数，获取失败') }        if(!param){
         return '';    }        var result = '';    if(typeof name === "object"){
         result = param;    }else if(typeof name === "string"){
         result =  param[name] && decodeURIComponent(param[name]);    }else{
         result =  Object.keys(param);    }    return !!result ? result : '';  },  //获取当前页面名，带后缀  getFullPageName : function() {
       //return location.href.split('?').shift().split('/').pop();    var q = location.href.indexOf('?');    var s = location.href.lastIndexOf('/') + 1;    return q == -1 ? location.href.substring(s) : location.href.substring(s, q);  },  //获取当前页面名，不带后缀  getPageName : function() {
       //return location.href.split('?').shift().split('/').pop().split('.').shift();    var pageName = this.getFullPageName();    return pageName.substring(0, pageName.indexOf('.'));  }};

简化，保留取参数

window.Jerry = {
     getUrlParam : function (name) {
       var param = null;    try{
         param = JSON.parse('{"'+ location.search.substr(1).replace(/(=|&)/g, m => ({
   "=": '":"', "&": '","'}[m]))  +'"}');    }catch(e){
    console && console.error && console.error('没有参数，获取失败') }        if(!param){
         return '';    }        return decodeURIComponent(param[name]) || '';  }};

B站版

/** * @description 解析URL参数 * @param url * @returns {string} */function parseQuery (url) {
     url = url || window.location.href  var querys = url.split("?");  var params = querys[1] ? querys[1].split("&") : [];  var obj = {
   };  for(var i = 0; i < params.length; i++){
       var param = params[i] || ''    var index = param.indexOf('=');    obj[param.substr(0, index)] = param.substr(index+1);    // var param = params[i].split("=");    // obj[param[0]] = param[1];  }  return obj;}

再来两个收集的对比下。不记得出处了

/*-----------------实现1--------------------*/function getPar(par){
       //获取当前URL    var local_url = document.location.href;     //获取要取得的get参数位置    var get = local_url.indexOf(par +"=");    if(get == -1){
           return false;       }       //截取字符串    var get_par = local_url.slice(par.length + get + 1);        //判断截取后的字符串是否还有其他get参数    var nextPar = get_par.indexOf("&");    if(nextPar != -1){
           get_par = get_par.slice(0, nextPar);    }    return get_par;} /*--------------------实现2(返回 $_GET 对象, 仿PHP模式)----------------------*/var $_GET = (function(){
       var url = window.document.location.href.toString();    var u = url.split("?");    if(typeof(u[1]) == "string"){
           u = u[1].split("&");        var get = {
   };        for(var i in u){
               var j = u[i].split("=");            get[j[0]] = j[1];        }        return get;    } else {
           return {
   };    }})(); /*第2种方式, 使用时, 可以直接 $_GET['get参数'], 就直接获得GET参数的值*/

参考资料

转载地址：https://jerryjin.blog.csdn.net/article/details/83444408 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！