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

[haizhilin2013]

trafficstars

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

[coderfee]

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