JS-设置或更新URL参数

心已赠人 2022-04-13 12:26 557阅读 0赞

使用JS设置或更新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;
    	}
    }
    var url = 'http://www.example.html';
    url = updateQueryStringParameter(url, 'a', '1');
    console.log(url);
    url = updateQueryStringParameter(url, 'b', '2');
    console.log(url);
    url = updateQueryStringParameter(url, 'a', '');
    console.log(url);

输出：

http://www.example.html?a=1
    http://www.example.html?a=1&b=2
    http://www.example.html?a=1&b=2

第二种方式，使用URL对象构造url

var url2 = new URL("http://foo.bar/?x=1&y=2");
    console.log(url2.href);
    url2.searchParams.append('x', 42);
    console.log(url2.href);
    url2.searchParams.set('x', 42);
    console.log(url2.href);

输出：

http://www.example.html?x=1&y=2
    http://www.example.html?x=1&y=2&x=42
    http://www.example.html?x=42&y=2

缺点是有些浏览器版本不支持  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmc3MDQ5ODc1NjI_size_16_color_FFFFFF_t_70]

> [https://developer.mozilla.org/en-US/docs/Web/API/URL/URL][https_developer.mozilla.org_en-US_docs_Web_API_URL_URL]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmc3MDQ5ODc1NjI_size_16_color_FFFFFF_t_70]: /images/20220413/00cac79890384643a5f41e3b12612e10.png
[https_developer.mozilla.org_en-US_docs_Web_API_URL_URL]: https://developer.mozilla.org/en-US/docs/Web/API/URL/URL