JS 设置或获取URL中的参数

分别获取url中search或hash的参数

先贴代码

说明: type: 只能是search 或者 hash,对应url中window.location下的对应字段
这样的设计是因为如果js动态改变了url中search的部分,页面会刷新,而改变hash的部分不会导致页面刷新
(search就是url中井号(#)以前问号(?)以后的部分, hash是井号以后的部分, 如 www.test.com?a=1&b=2#c=3&d=4, search是?a=1&b=2,hash是#c=3&d=4)

export function getParam(type, key) {
  // 正则表达式 获取type下的字符串中key的对应值,
  const regExp = new RegExp(`[?&#]{1}${key}=(.*?)([&/#]|$)`)
  // 如果匹配不到key match方法会返回null
  const value = window.location[type].match(regExp)
  return value && value[1]
}
/**
 * 
 * @param {string} type 只能是search或者hash
 * @param {object} keyValueMap 要设置在type中的每个key,value
 */
export function setParam(type, keyValueMap) {
  // 首先获取到当前的type字符串
  let str = `${window.location[type]}`
  for (const key of Object.keys(keyValueMap)) {
    // 取出每个key,value对
    const value = keyValueMap[key]
    // 如果当前的type类型的参数中已经包含了这个key,那么修改它
    if (getParam(type, key)) {
      const regExp = new RegExp(`(.*)([#&?]${key}=)(.*?)($|&.*)`)
      const array = str.match(regExp)
      // 如果要将一个key设置成空,那么直接将它从url中移除(看需求,不必须)
      if (value === '') {
        array.splice(2, 2)
      } else { // 将匹配到的当前key对应的值替换成新的value
        array[3] = value
      }
      array.shift()
      str = array.join('')
    } else { // 如果当前没有这个key的参数,那么增加在末尾
      str = str.length !== 0
        ? `${str}&${key}=${value}`
        : `${key}=${value}`
    }
  }
  window.location[type] = str
}

没了…

正则很有用,但是用起来总要查,还要在浏览器console里试试试…