向当前url追加参数/获取地址栏中的参数

本文介绍如何使用JavaScript操作URL参数,包括向当前URL追加参数而不会产生新的浏览器历史记录,以及如何解析URL中的查询参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、使用history的replaceState方法向当前url追加参数

// 调用
var newurl = updateQueryStringParameter(window.location.href, 'key', 'value');
//向当前url添加参数,没有历史记录
window.history.replaceState({
	path: newurl
}, '', newurl);

//方法
/**
 * @param { String } uri 当前地址栏的url
 * @param { String } key 添加的key值
 * @param { String } value 添加的value值
 * @return { String } 添加之后的url
 */
function updateQueryStringParameter(uri, key, value) {
	if(!value) {
		return uri;
	}
	var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
	var separator = uri.indexOf('?') !== -1 ? "&" : "?";
	if (uri.match(re)) {
		return uri.replace(re, '$1' + key + "=" + value + '$2');
	}
	else {
		return uri + separator + key + "=" + value;
	}
}

二、获取地址栏中的参数

第一种方式:利用qs库

1、安装插件

import qs from 'qs'

 2、调用方法

let queryParams = getParamsWithUrl(window.location.href)

3、方法

// 1、利用qs库
getParamsWithUrl(url) {
    return qs.parse(url.split('?')[1])
}

       

第二种方式:纯js

 1、调用方法

let queryParams = getParamsWithUrl(window.location.href)

2、方法

// 2、手写的方法
/**
 * @param { String } url 要截取穿参的url
 * @return { Object } 返回获取地址栏中的参数对象
 */
const getParamsWithUrl = (url) => {
  let params = {}
  // 是否是字符串
  if (Object.prototype.toString.call(url).slice(8, -1) != 'String') {
    return params
  }
  // 是否存在参数字符串
  let paramsStr = url.split('?')[1]
  if (!paramsStr) {
    return params
  }
  // 将参数字符串以&分割成数组  
  let paramsArr = paramsStr.split('&');
  // 循环处理,又以=分割, item.split('=')[0]作为key, item.split('=')[1]作为value
  paramsArr.forEach(item => {
    if (item.split('=')[0] && item.split('=')[1]) params[item.split('=')[0]] = item.split('=')[1]
  })
  return params
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

__冬七

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值