JS实现url地址栏参数拼接、更改或者删除，（根据筛选条件，一个方法实现）

本文链接：https://blog.csdn.net/tj310/article/details/122208548

其实主要判断的点有两个，一共三种情况：

判断url参数是否只有一个，使用一个参数的正则匹配
判断多个参数：
1、判断是否是第一个参数
2、判断是否是第二个参数

这两个点梳理出来就开始实现正则匹配，但是每次匹配的时候要考虑传入的值是否为空，如果为空要按上述两种情况去处理，把值替换为空串，如果不为空，按默认正则模板直接替换

代买实现：


/**
 * @description:
 * @param {string} name:传入的键名，参数名
 * @param {any} value：传入的值
 * @return {*}
 */
const changeURLPar = (name: string, value: any) => {
  // 定义需要替换的正则
  const pattern: string = name + '=([^&]*)'
  // 定义最终需要替换的值
  const replaceText: string = name + '=' + value

  // 获取url
  let url: string = location.href
  // 如果url已经含有参数
  if (url.match(pattern)) {
    // 默认模板正则
    const temp: string = '/(' + name + '=)([^&]*)/gi'
    // 只有一个参数
    const temp2: string = '/\\?(' + name + '=)([^&]*)/gi'
    // 两个参数  第一个参数
    const temp1: string = '/(' + name + '=)([^&]*)&/gi'
    // 有两个参数  并且非第一个参数
    const temp3: string = '/&(' + name + '=)([^&]*)/gi'
    const items = params()
    // 在替换参数的时候,此处首先判断参数个数  ===> 如果只有一个参数,替换?+后面的字段
    // 这里判断是不是第一个参数  第一个参数为null的时候要去掉
    if (items.length === 1) {
      url = judgeParams(value, temp, temp2, replaceText, url)
    } else {
      // 这里表示当前url的参数有两个
      // 首先判断第一个参数
      if (items[0].includes(name)) {
        url = judgeParams(value, temp, temp1, replaceText, url)
      } else {
        // 这里判断非第一个参数
        url = judgeParams(value, temp, temp3, replaceText, url)
      }
    }
  } else {
    if (value && value.length) {
      // url还未包含传入的参数，如果匹配到?，表示是第一个参数，反之不是
      if (url.match('[?]')) {
        url = url + '&' + replaceText
      } else {
        url = url + '?' + replaceText
      }
    }
  }

  // 最总替换页面参数  但是不刷新页面
  window.history.replaceState(
    {
      path: url,
    },
    '',
    url
  )
}

/**
 * @description: 这里获取url参数数组
 * @param {*}
 * @return {*}
 */
const params = ():string[] => {
  const query: string = location.search.substring(1)
  const querys: string[] = query.split('&')
  return querys //返回?号后面的参数名与参数值的数组
}


/**
 * @description:
 * @param {any} value 传入的值
 * @param {string} temp 默认正则模板
 * @param {string} temps 很具参数位置修改正则模板
 * @param {string} replace 需要替换的内容
 * @param {string} url:目标uel
 * @return {*}
 */
const judgeParams = (
  value: any,
  temp: string,
  temps: string,
  replace: string,
  url: string
): string => {
  if (value && value.length) {
    return url.replace(eval(temp), replace)
  } else {
    return url.replace(eval(temps), '')
  }
}