[js] 第12天 写一个获取当前url查询字符串中的参数的方法

[haizhilin2013]

第12天 写一个获取当前url查询字符串中的参数的方法

[coderfe]

function params() {
  const search = window.location.search;
  search = search.substr(1, search.length);
  const res = {};
  if (!search) return res;
  search.split('&').map(item => {
    const [key, value] = item.split('=');
    res[key] = decodeURIComponent(value);
  });
  return res;
}

[qqdnnd]

function urlParam(){
    const param = {};
    location.search.replace(/([^&=?]+)=([^&]+)/g,(m,$1,$2)=> param[$1] = $2);
    return param;
}

[tzjoke]

不考虑IE的话，直接使用url api

[Damon99999]

url = "https://github.com/kk?tab=stars&assetId=311&page=DETAIL&projectPhase=2";
function splitUrl(url) {
    if(typeof url !== "string") return;
    var obj = {};
    url.split("?")[1].split("&").forEach(item => {
        var arr = [key, value] = item.split("=")
        obj[arr[0]] = arr[1];
    })
    console.log(obj);
}
splitUrl(url);

window.location.search // 可以直接获取，如果结合上面方法可以省一些代码

[pma934]

function urlParam(url){
    const param = {};
    url.replace(/[?&](.*?)=([^&]*)/g,(m,$1,$2)=> param[$1] = $2);
    return param;
}

[bWhirring]

function getParams(name) {
    const { search }  = window.location;
    const params = new URLSearchParams(search);
    return params.get(name)
}

[zzccww]

window.location.search.match(/(\w)+(?==)/g)

[Konata9]

const getLocationParams = () => {
  const paramsMap = new Map();
  if (location.search) {
    // 第一个字符串为 ?
    location.search
      .substr(1)
      .split("&")
      .forEach((param) => {
        const [key, value] = param.split("=");
        paramsMap.set(key, value);
      });
  }

  return paramsMap;
};

const getLocationParam = (key) => getLocationParams().get(key);

[shufangyi]

const parsingURLSearch = url => {
  const searchs = url.match(/[^?&=]*=[^?&=]*/g)
  return (
    searchs &&
    searchs.reduce(
      (pre, s) => ({
        ...pre,
        [s.split('=')[0]]: s.split('=')[1]
      }),
      {}
    )
  )
}

[Vi-jay]

const url = "www.baidu.com?asd=asd%asd&dsa=2";
function getParamsByUrl(url) {
  const obj = {};
  url.replace(/([^?&]+)=([^?&]+)/g, (__, c1, c2) => {
    obj[c1] = c2;
  });
  return obj
}
console.log(getParamsByUrl(url));//{ asd: 'asd%asd', dsa: '2' }

[AchillesV]

const getParmas = (url) => {
  return url.split('&').map((Param) => {
    return Param.split('=')[1]
  })
}

[jiamianmao]

function getParams(url, key) {
   let oUrl = new URL(url)
  return oUrl.searchParams.get(key)
}

[10901182936]

@coderfe const定义的常量不能赋值吧

[wsypower]

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a
    ),{}
  );
getURLParameters(window.location.href) 

[xcLtw]

function getQueryString(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    const r = location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null;
}

[diandianzd]

const url = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%B5%8F%E8%A7%88%E5%99%A8%E5%86%85%E6%A0%B8%E9%83%BD%E6%9C%89%E5%93%AA%E4%BA%9B&rsv_pq=d10f9e03002ad5ae&rsv_t=7308xq%2FYDOMBWPsvXbUpTRo6FpYwkCts0RWBt1BKtKXc0%2FPcfNNKNoe%2Bxxc&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=2&rsv_sug1=1&rsv_sug7=001&rsv_n=2&rsv_sug2=0&inputT=682&rsv_sug4=703&rsv_sug=9"

res = url.substr(url.indexOf('?') + 1).split('&').reduce((pre,cur)=>{
  const [key, value] = cur.split("=");
  pre.set(key,value)
  return pre
},new Map())

console.log(res.get('ie'))

[0x3c]

/**
 * @param {string} url
 * @return {object}
 */
function queryParams(url) {
  const queryStr = url.split("?")[1];
  if (!queryStr) return {};
  return queryStr.split("&").reduce((obj, str) => {
    const [k, v] = str.split("=");
    obj[k] = v;
    return obj;
  }, {});
}

[YeChang]

//第12天 写一个获取当前url查询字符串中的参数的方法

function params(url) {
  var kvs = url.substring(url.indexOf("?") + 1).split("&");
  var res = {};
  kvs.map(param => {
    var [key, value] = param.split("=");
    res[key] = value;
  });
  return res;
}

const url =
  "https://s.taobao.com/search?q=%E7%83%AD%E6%B0%B4%E5%A3%B6&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&spm=a21bo.2017.201856-taobao-item.1&ie=utf8&initiative_id=tbindexz_20170306";

const res = params(url);

console.log(res.ie);

[crazyming9528]

function getQueryString(name) { var string = window.location.search.substr(1); if (!string) return; var res = {}; string = string.replace(/&&/g, "&");//将参数中可能存在的 && 替换为统一的 & string.split("&").forEach(function (item) { var temp = item.split("="); res[temp[0]] = temp[1]; }); return res[name]; }

[rni-l]

function getQuery(str) {
  const arr = str.split('?')
  if (!arr[1]) return {}
  return arr[1].split('&').reduce((acc, cur) => {
    const val = cur.split('=')
    return {
      ...acc,
      [decodeURIComponent(val[0])]: decodeURIComponent(val[1])
    }
  }, {})
}

[susanforme]

let str=window.location.search.replace("?","");
function getParams(str){
  let params={};
  let ary = str.split("&");
  ary.forEach(e=>{
    let results=e.split("=");
    params[results[0]]=results[1];
  });
  return params;
}

[c37csq]

function getRequest (str) { var arr = [] var string = str.split("?")[1] // ['id=39'] if (string.indexOf("&") !== -1) { for(var i = 0; i < string.split("&").length; i ++) { var obj = {} var item = string.split("&")[i] var name = item.split("=")[0]; var value = unescape(item.split("=")[1]); obj[name] = value arr.push(obj) } return arr } else { var obj = {} var name = string.split("=")[0] var value = string.split("=")[1] obj[name] = value return obj } }

[OceanFlooor]

let url = 'https://www.raven.com?a=param1&b=param2'

function getParams(url) {
  let reg = /[^?&=]+=[^&=]*/g
  let arr, map = new Map()
  while((arr = reg.exec(url)) !== null) {
    let mapArr = arr[0].split('=')
    map.set(mapArr[0], mapArr[1])
  }
  return map
}
console.log(getParams(url)) // Map { 'a' => 'param1', 'b' => 'param2' }

[qiqingfu]

const url = "https://www.baidu.com/?a=1&b=2&c=3";

const getQuery = str => {
  const startIndex = str.indexOf('?');
  const endIndex = str.lastIndexOf('?');

  if (startIndex !== endIndex) {
    return url;
  }

  const queryString = str.slice(startIndex + 1);
  const map = {};

  queryString.split("&")
    .forEach(item => {
      if (item) {
        const [key, value] = item.split("=");
        map[key] = value;
      }
    });

  return  map;
};

console.log(getQuery(url));

[larry0442]

const getSearchParam = (param) => {
  const search = window.location.search;
  let res = {};
  search.slice(1).split('&').forEach(item=> {
    const [key, value] = item.split('=');
    res[key] = value;
  })
  return res[param];
}

大概思路是这样，应该可以更完善

[artoriaforDY]

let url='baidu.com?aaa=1&bbb=2'; let obj={}; url.replace(/(\w)(=)(\w)/g,(match,s1,s2,s3)=>obj[s1]=s3); console.log(obj);

[blueRoach]

楼上大佬的, 之前一直理解不了[^&=?]，后来懂了，[]里面^是取反，而且除了‘/’其他的都不用转义

      function getParam(url){
        let params = {}
        url.replace(/([^&=?]+)=([^&]+)/g, (m, s1, s2) => params[s1] = s2)
        return params
      }

[13168335674]

const getUrlQuery = (url = location.href) => {
    try {
      return [...new URL(url).searchParams].reduce(
        (pre, [key, value]) => Object.assign(pre, { key, value }),
        {},
      );
    } catch {
      throw new Error(`url格式不正确。url: ${url}`);
    }
  };

[giggleCYT]

function fn() {
            let url = window.location.search;
            url = url.replace(/\?/, '');
            return url.replace(/&/g, ',')
        }

[songer8]

function getQuerySring(key) {
    let querySring = window.location.search;
    if (querySring) {
        let queryStringWithoutQuestionMark = querySring.slice(1);
        let querySringArr = queryStringWithoutQuestionMark.split('&');
        let value = null;
        querySringArr.forEach((item) => {
            if (item.split('=')[0] === key) {
                value = item.split('=')[1];
            }
        })
        return value;
    } else {
        return null;
    }
}

[laboonly]

function getSearch (url) { let prams = {} url.split('?')[1].split('&').forEach(element => { let arr = element.split("="); prams[arr[0]] = arr[1] }); return prams; }

[MrZ2019]

function params() { const search = window.location.search; search = search.substr(1, search.length); const res = {}; if (!search) return res; search.split('&').map(item => { const [key, value] = item.split('='); res[key] = decodeURIComponent(value); }); return res; }

[MrZ2019]

function urlParam(){ const param = {}; location.search.replace(/([^&=?]+)=([^&]+)/g,(m,$1,$2)=> param[$1] = $2); return param; }

[wangzhangbo5916]

function getURLParams(search = '') {
    const params = Object.create(null);
    search.replace(/([^&=?]+)=([^&]+)/g, (m, $1, $2) => {
        console.log(m, $1, $2)
        params[$1] = $2;
    });
    return params;
}

console.log(getURLParams('?name=name&age=3'));
console.log(getURLParams('?name=name&&age=3'));
console.log(getURLParams('?'));
console.log(getURLParams(''));

注意：[^&=?]中的^表示取反，意思是除了&=?外的其他字符

[m7yue]

const getParams = () => {
  const serachStr = window.location.search.slice(1)
  let res = {}
  serachStr.split('&').map(item => {
    const [k, v] = item.split('=')
    res[k] = v
  })
  return res
}

[zebratt]

function queryUrlParams(url) {
  const res = {};

  if (url.indexOf("?") === -1) {
    return res;
  }

  if (typeof URL !== "undefined") {
    const urlObj = new URL(url);

    for (const [key, value] of urlObj.searchParams.entries()) {
      res[key] = value;
    }

    return res;
  } else {
    const search = url.split("?")[1];
    const pairs = search.split("&");

    return pairs.reduce((acc, cur) => {
      const [key, value] = cur.split("=");

      acc[key] = value;

      return acc;
    }, res);
  }
}

[VaynePeng]

function getUrlParams() {
  let url = window.location.search
  let urlParams = new URLSearchParams(url)
  let params = {}
  for (const [key, value] of urlParams) {
    params[key] = value
  }
  return params
}

[lxt-ing]

function getParams(){
        let params = location.href.split('?')[1];
        let finalParams = {};
        if(params){
            params.split('&').map(i=>{
                let single = i.split('=');
                (single[0] && single[1] )?  finalParams[single[0]] =  single[1]:''
            })
        }
        return finalParams
    }

[378406712]

const url = "http://www.h-camel.com/show/36.html?a=b&b=c"; function sliceStr(url) { let obj = {}; const data = url.split("?")[1].split("&");

data.forEach((item, index) => { let items = item.split("="); obj[items[0]] = items[1]; }); return obj; } console.log(sliceStr(url));

[cielaber]

function getParams(url){ let arr = url.split('?')[1].split('&'); let obj={} arr.forEach(item=>{ obj[item.split('=')[0]] = item.split('=')[1] }) return obj; }

[Believe-xi]

 var hash = location.hash.split('#')[1].split('?')
  var hashObj = {
  }
  for (let i = 0; i < hash.length; i++) {
    hashObj[hash[i].split('=')[0]] = hash[i].split('=')[1]
  }
  console.log(hashObj);

[amikly]

正则表达式

function getUrlParam(url) {
    const param = {};
    url.replace(/([^&=?]+)=([^&]+)/g, (match, $1, $2) => (param[$1] = $2));

    // const obj = {};
    // url.replace(/(\w*)(=)(\w*)/g, (match, key, operator, value) => {
    //   obj[key] = value;
    // });

    return param;
}
console.log(getUrlParam("http://localhost:8080?a=1&b=2&c=3&d="));

split方法

// split方法
function getUrlParam() {
    const search = window.location.search;
    search.slice(1);
    // search = search.substr(1);

    const res = {};
    if (!search) {
        return res;
    }

    search.split("&").map((item) => {
        const [key, value] = item.split("=");
        // decodeURIComponent()将已编码 URI 中所有能识别的转义序列转换成原字符
        res[key] = decodeURIComponent(value);
    });

    return res;
}

[VaynePeng]

let params = new URLSearchParams(location.search)
let paramsJSON = {}
for (const [index, item] of params) {
  paramsJSON[index] = item
}

[tk12138]

[github-cxtan]

function GetUrlParament(data) { let getUrlStr = data.slice(data.indexOf('?') + 1, data.length); let array = getUrlStr.split('&'); console.log(array); }

[yxllovewq]

const getQuery = () => { let query = {}; for({ groups: { k, v, k2, v2 } } of [...decodeURIComponent(location.search).matchAll(/(?\w+)=(?.+?)&|(?\w+)=(?.+)$/g)]) { k ? query[k] = v : query[k2] = v2; } return query; }

[xiaoqiangz]

// 写一个获取当前url查询字符串中的参数的方法 function getParamsByUrl(href, param) { let obj = {} href.split('?')[1].split('&').forEach(item => { arr = item.split('=') let [key, value] = item.split('=') obj[key] = value }) console.log(obj[param]) } getParamsByUrl('www.baidu.com?a=11&b=22&c=33', 'c')

[wenxd]

  function getQueryParams() {
    let paramsStr = window.location.search
    let queryArr = paramsStr.substr(1).split('&')
    let params = []
    queryArr.map((item) => {
      params.push(item.split('=')[0])
    })
    console.log(params);
  }
  getQueryParams()

[HoseaGuo]

在hash路由后面加 ?keyA=valueA，通过location.search获取到的是空字符串， 如链接是：http://127.0.0.1:8080#/home?a&b=234，通过location.search获取到的是""

所以想到的是用正则来处理这种情况：

function getParams(url) {
  let paramsObj = {};
  let regExp = /\?([^#]+)/;
  let match = url.match(regExp);
  if (match && match[1]) {
    match[1].split('&').forEach(item => {
      let [key, value] = item.split('=');
      if (value) paramsObj[key] = value;
    })
  }
  return paramsObj;
}
let paramsObj = getParams('http://127.0.0.1:8080#/home?a&b=234');
console.log(paramsObj) // {b: '234'}
let paramsObj2 = getParams('http://127.0.0.1:8080?a&b=234#/home');
console.log(paramsObj2) // {b: '234'}

[wyy-g]

function getUrlStr(url){ var search = url ? url.split('?')[1] : location.search, res = {}, arr = search.split('&'); for(var i = 0; i < arr.length; i++){ var arg = arr[i].split('='); res[arg[0]] = arg[1]; } return res; }

console.log(getUrlStr('https://mp.csdn.net/mdeditor?ad=2&wq=5'))