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

Created on 27 Apr 2019  ·  37Comments  ·  Source: haizlin/fe-interview

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

js
Source
picture haizhilin2013

Most helpful comment

function urlParam(){
    const param = {};
    location.search.replace(/([^&=?]+)=([^&]+)/g,(m,$1,$2)=> param[$1] = $2);
    return param;
}
picture qqdnnd on 20 May 2019
👍20 👀2 😄1

All 37 comments

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;
}
coderfe picture coderfe on 9 May 2019
👍7 
function urlParam(){
    const param = {};
    location.search.replace(/([^&=?]+)=([^&]+)/g,(m,$1,$2)=> param[$1] = $2);
    return param;
}
qqdnnd picture qqdnnd on 20 May 2019
👍20 👀2 😄1

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

tzjoke picture tzjoke on 29 May 2019 
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 // 可以直接获取，如果结合上面方法可以省一些代码
Damon99999 picture Damon99999 on 18 Jun 2019
👍3

function getPrams (url) {

let params = {};
return url.match(/([^?=&]+)=([^=&]+)/g).forEach(equa => params[equa.split('=')[0]] = equa.split('=')[1]);

}

AricZhu picture AricZhu on 24 Jun 2019 
function urlParam(url){
    const param = {};
    url.replace(/[?&](.*?)=([^&]*)/g,(m,$1,$2)=> param[$1] = $2);
    return param;
}
pma934 picture pma934 on 28 Jun 2019 
function getParams(name) {
    const { search }  = window.location;
    const params = new URLSearchParams(search);
    return params.get(name)
}
bWhirring picture bWhirring on 2 Jul 2019

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

zzccww picture zzccww on 4 Jul 2019 
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);
Konata9 picture Konata9 on 11 Jul 2019 
const parsingURLSearch = url => {
  const searchs = url.match(/[^?&=]*=[^?&=]*/g)
  return (
    searchs &&
    searchs.reduce(
      (pre, s) => ({
        ...pre,
        [s.split('=')[0]]: s.split('=')[1]
      }),
      {}
    )
  )
}
shufangyi picture shufangyi on 18 Jul 2019 
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' }
Vi-jay picture Vi-jay on 26 Jul 2019 
const getParmas = (url) => {
  return url.split('&').map((Param) => {
    return Param.split('=')[1]
  })
}
AchillesV picture AchillesV on 29 Jul 2019 
function getParams(url, key) {
   let oUrl = new URL(url)
  return oUrl.searchParams.get(key)
}
jiamianmao picture jiamianmao on 8 Aug 2019

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

10901182936 picture 10901182936 on 26 Aug 2019 
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)
wsypower picture wsypower on 26 Aug 2019
👎1 
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;
}
xcLtw picture xcLtw on 3 Sep 2019 
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'))
diandianzd picture diandianzd on 17 Oct 2019
👍1 
/**
 * @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;
  }, {});
}
sosamuel picture sosamuel on 23 Oct 2019
👍1 
//第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);
YeChang picture YeChang on 22 Dec 2019

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];
}

crazyming9528 picture crazyming9528 on 23 Dec 2019 
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])
    }
  }, {})
}
rni-l picture rni-l on 10 Jan 2020 
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;
}
susanforme picture susanforme on 6 Feb 2020

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

c37csq picture c37csq on 14 Mar 2020 
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' }
OceanFlooor picture OceanFlooor on 25 Mar 2020 
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));
qiqingfu picture qiqingfu on 6 Apr 2020 
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];
}

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

larry0442 picture larry0442 on 7 Apr 2020

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);

artoriaforDY picture artoriaforDY on 23 Apr 2020

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

      function getParam(url){
        let params = {}
        url.replace(/([^&=?]+)=([^&]+)/g, (m, s1, s2) => params[s1] = s2)
        return params
      }
blueRoach picture blueRoach on 28 May 2020 
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}`);
    }
  };
13168335674 picture 13168335674 on 2 Jun 2020 
function fn() {
            let url = window.location.search;
            url = url.replace(/\?/, '');
            return url.replace(/&/g, ',')
        }
giggleCYT picture giggleCYT on 8 Jun 2020 
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;
    }
}
songer8 picture songer8 on 24 Jun 2020

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

laboonly picture laboonly on 21 Aug 2020

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 picture MrZ2019 on 8 Sep 2020

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

MrZ2019 picture MrZ2019 on 8 Sep 2020 
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(''));

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

babulongbo007 picture babulongbo007 on 24 Sep 2020 
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
}
m7yue picture m7yue on 10 Oct 2020 
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);
  }
}
zebratt picture zebratt on 15 Jan 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments