前端点击的时候更改url后缀的属性值的方法(支持多个属性值拼接不重复#?都可支持)

有的时候在开发的时候，需要我们处理url的内容，在不同点击的时候，更改url后缀的属性，比如
当我点击一个增加年龄的按钮，想在某个url的后缀增加xxxxx.com#old=20;重复点击的时候，只添加一次。
我们可以使用如下的方法，来做到这种效果。
下面是解决问题的方法，方法是通用的。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<div class="before_url">
    <a href="http://www.baidu.com">http://www.baidu.com</a>
</div>
<div class="btn" data-key="name" data-value="test">
    <button>点击后后缀增加key:name value:test的值</button>
</div>
<div class="btn2" data-key="old" data-value="22">
    <button>点击后后缀增加key:old value:22</button>
</div>

<script>

    //url 代表获取的老的url的路径
    //arg 代表属性   如 old name color
    //arg_val 代表属性值   如20 test red

    function _getLinkValue(url, arg, arg_val) {
        var pattern = arg + '=([^&]*)';
        var replaceText = arg + '=' + arg_val;
        if (url.match(pattern)) {
            var tmp = '/(' + arg + '=)([^&]*)/gi';
            tmp = url.replace(eval(tmp), replaceText);
            return tmp;
        } else {
            if (url.match('[\#]')) {   //某些情况下在url拼接时，是以？开始的，要使用?->#替代 if (url.match('[\?]')) { 
                return url + '&' + replaceText;
            } else {
                return url + '#' + replaceText;//某些情况下在url拼接时，是以？开始的，要使用?->#替代 return url + '?' + replaceText;
            }
        }
        return url + '\n' + arg + '\n' + arg_val;
    }

    $(document).on("click",".btn button",function () {
        var key = $(this).parents(".btn").attr("data-key");
        var value = $(this).parents(".btn").attr("data-value");
        var url = $(".before_url a").attr("href");
        var newUrl = _getLinkValue(url, key, value);
        $(".before_url a").attr("href",_getLinkValue(url, key, value))
        $(".before_url a").html(newUrl);
    })
    $(document).on("click",".btn2 button",function () {
        var key = $(this).parents(".btn2").attr("data-key");
        var value = $(this).parents(".btn2").attr("data-value");
        var url = $(".before_url a").attr("href");
        var newUrl = _getLinkValue(url, key, value);
        $(".before_url a").attr("href",_getLinkValue(url, key, value))
        $(".before_url a").html(newUrl);
    })
</script>

通过这种方法可以解决自定义更改路径key value值的问题。 欢迎大家交流补充。

可以直接复制粘贴到html中进行验证，效果图如图所示。