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

haizhilin2013 · 2019-04-27T20:55:31Z

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

coderfe · 2019-05-09T06:29:41Z

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 · 2019-05-20T03:57:24Z

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

tzjoke · 2019-05-29T03:04:01Z

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

Damon99999 · 2019-06-18T09:20:27Z

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 · 2019-06-28T16:29:52Z

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

bWhirring · 2019-07-02T13:03:09Z

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

zzccww · 2019-07-04T08:16:01Z

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

Konata9 · 2019-07-11T01:54:55Z

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 · 2019-07-18T09:00:13Z

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

Vi-jay · 2019-07-26T07:20:13Z

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 · 2019-07-29T02:21:01Z

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

jiamianmao · 2019-08-08T16:36:18Z

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

10901182936 · 2019-08-26T03:01:03Z

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

wsypower · 2019-08-26T06:34:27Z

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 · 2019-09-03T10:01:11Z

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 · 2019-10-17T01:26:49Z

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 · 2019-10-23T03:22:42Z

/**
 * @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 · 2019-12-22T08:39:02Z

//第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 · 2019-12-23T03:32:55Z

rni-l · 2020-01-10T01:24:59Z

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 · 2020-02-06T06:40:00Z

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 · 2020-03-14T10:09:25Z

OceanFlooor · 2020-03-25T12:07:58Z

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 · 2020-04-06T12:40:46Z

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 · 2020-04-07T10:06:33Z

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 · 2020-04-23T09:32:14Z

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 · 2020-05-28T04:15:45Z

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

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

13168335674 · 2020-06-02T09:38:25Z

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 · 2020-06-08T08:16:57Z

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

songer8 · 2020-06-24T15:19:16Z

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 · 2020-08-21T17:43:08Z

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

smile-2008 · 2020-09-08T01:23:15Z

smile-2008 · 2020-09-08T01:32:14Z

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

wangzhangbo5916 · 2020-09-24T14:27:29Z

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 · 2020-10-10T08:37:45Z

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 · 2021-01-15T03:01:16Z

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 · 2021-02-14T18:12:21Z

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 · 2021-04-25T08:38:45Z

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 · 2021-04-26T03:09:16Z

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 · 2021-05-10T14:36:50Z

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 · 2021-09-02T13:30:27Z

 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 · 2021-10-30T16:40:18Z

正则表达式

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 · 2021-11-05T10:30:55Z

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

tk12138 · 2021-11-17T01:57:27Z

github-cxtan · 2022-02-16T05:16:54Z

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

yxllovewq · 2022-03-08T04:16:05Z

xiaoqiangz · 2022-05-24T06:10:03Z

// 写一个获取当前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 · 2022-05-26T01:30:42Z

  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 · 2022-08-10T06:46:16Z

在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'}

Sobrium · 2022-09-10T04:10:06Z

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

wangyuanjian · 2023-01-29T08:05:46Z

需要注意一下参数中有数组的情况，比如 http://127.0.0.1:5501/index.html?hostName=xxx3&ports=1&ports=5

原生 API 中的 getAll() 很好可以参考

lili-0923 · 2024-02-02T09:12:37Z

window.location.search

pengsir120 · 2024-09-13T13:09:06Z

function getUrlParms(url) {
const urlObj = new URL(url)
for(let p of urlObj.searchParams) {
console.log(p);
}
}

panpanxuebing · 2024-12-09T08:17:10Z

function getParams (url) {
  const arr = url.split('?')
  const obj = {}
  if (arr.length > 1) {
    arr[1].split('&').forEach((v) => {
      const [key, value] = v.split('=')
      obj[key] = value
    })
  }
  return obj
}

haizhilin2013 added the js JavaScript label Apr 27, 2019

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

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

Comments

haizhilin2013 commented Apr 27, 2019

coderfe commented May 9, 2019

qqdnnd commented May 20, 2019

tzjoke commented May 29, 2019

Damon99999 commented Jun 18, 2019 • edited Loading

pma934 commented Jun 28, 2019 • edited Loading

bWhirring commented Jul 2, 2019

zzccww commented Jul 4, 2019

Konata9 commented Jul 11, 2019

shufangyi commented Jul 18, 2019

Vi-jay commented Jul 26, 2019 • edited Loading

AchillesV commented Jul 29, 2019 • edited Loading

jiamianmao commented Aug 8, 2019

10901182936 commented Aug 26, 2019

wsypower commented Aug 26, 2019

xcLtw commented Sep 3, 2019

diandianzd commented Oct 17, 2019

0x3c commented Oct 23, 2019

YeChang commented Dec 22, 2019

crazyming9528 commented Dec 23, 2019

rni-l commented Jan 10, 2020

susanforme commented Feb 6, 2020

c37csq commented Mar 14, 2020

OceanFlooor commented Mar 25, 2020

qiqingfu commented Apr 6, 2020 • edited Loading

larry0442 commented Apr 7, 2020

artoriaforDY commented Apr 23, 2020

blueRoach commented May 28, 2020 • edited Loading

13168335674 commented Jun 2, 2020 • edited Loading

giggleCYT commented Jun 8, 2020

songer8 commented Jun 24, 2020 • edited Loading

laboonly commented Aug 21, 2020

smile-2008 commented Sep 8, 2020

smile-2008 commented Sep 8, 2020

wangzhangbo5916 commented Sep 24, 2020

m7yue commented Oct 10, 2020

zebratt commented Jan 15, 2021

VaynePeng commented Feb 14, 2021

lxt-ing commented Apr 25, 2021 • edited Loading

378406712 commented Apr 26, 2021

cielaber commented May 10, 2021

Believe-xi commented Sep 2, 2021

amikly commented Oct 30, 2021

正则表达式

split方法

VaynePeng commented Nov 5, 2021

tk12138 commented Nov 17, 2021

github-cxtan commented Feb 16, 2022

yxllovewq commented Mar 8, 2022

xiaoqiangz commented May 24, 2022

wenxd commented May 26, 2022 • edited Loading

HoseaGuo commented Aug 10, 2022 • edited Loading

Sobrium commented Sep 10, 2022

wangyuanjian commented Jan 29, 2023

lili-0923 commented Feb 2, 2024

pengsir120 commented Sep 13, 2024

panpanxuebing commented Dec 9, 2024

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

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

Damon99999 commented Jun 18, 2019 •

edited

Loading

pma934 commented Jun 28, 2019 •

edited

Loading

Vi-jay commented Jul 26, 2019 •

edited

Loading

AchillesV commented Jul 29, 2019 •

edited

Loading

qiqingfu commented Apr 6, 2020 •

edited

Loading

blueRoach commented May 28, 2020 •

edited

Loading

13168335674 commented Jun 2, 2020 •

edited

Loading

songer8 commented Jun 24, 2020 •

edited

Loading

lxt-ing commented Apr 25, 2021 •

edited

Loading

wenxd commented May 26, 2022 •

edited

Loading

HoseaGuo commented Aug 10, 2022 •

edited

Loading