在javascript中搜索和替换特定的查询字符串参数值

Posted 2023-02-16

【中文标题】在javascript中搜索和替换特定的查询字符串参数值

【英文标题】：Search and replace specific query string parameter value in javascript

【发布时间】：2011-07-21 19:08:13

【问题描述】：

我有一个类似这样的字符串：

a_href= "www.google.com/test_ref=abc";

我需要在上面的字符串中搜索 test_ref=abc 并将其替换为新值

var updated_test_ref = "xyz";

a_href ="www.google.com/test_ref=updated_test_ref" 

即

www.google.com/test_ref=xyz.

我们怎样才能做到这一点？

编辑：

test_ref 值本身可以是一个 URL 链接，例如 http://google.com?param1=test1&param2=test2。我需要在第一个＆之前捕获完整的价值。

【问题讨论】：

Replacing strings with regex in javascript的可能重复

这个问题已经被问了一百万次了。您是否尝试过先搜索？

no .. 它相似但不重复。我不知道 test_ref 的值 ..作为它的查询字符串参数，它的值随不同的页面而变化。我还需要用变量 updated_test_ref 的值替换该值。它不是固定值。我首先需要捕获 test_ref 之后的所有内容，例如 string.replace(/test_ref=(.*)?/ )，然后将匹配的部分替换为 updated_test_ref 值。

嗨 Jon.. 是的.. 我做到了，但我无法得到我特别想要的东西。

@Jon - 查看我的标题更新。鉴于这一点和@cwolves 的回答，这不仅仅是你的链接的副本（尽管它可能是其他东西的副本（没有看过））

【参考方案1】：

a_href = a_href.replace(/(test_ref=)[^\&]+/, '$1' + updated_test_ref);

【讨论】：

解释：字面匹配字符串"test_ref="，后面跟一个或多个不是查询字符串参数分隔符("&")，并替换为捕获的匹配("test_ref=" )，后跟变量updated_test_ref的值。

如果我的初始 test_ref 值是这样的 = "google.com?ie=UTF8&param1=test1&param2=test2" 会发生什么。请注意 test_ref 值本身也是一个 URL 链接。我需要先捕获 test_ref 的完整值&

@TopCoder - 这是不需要问的问题类型。只需获取 Firebug 并自己在控制台中进行测试。 “如果……会发生什么？”几乎从来都不是一个好问题。试试看吧。

实际上，我认为更好的方法是使用 /([?|&]test_ref=)[^\&]+/ 因为你可以有另一个以 test_ref 结尾的参数

嗨，为了让它更好，我们如何使正则表达式不区分大小写？ @lwburk

【参考方案2】：

*查找特定查询字符串并替换其值的 Java 脚本代码 *

('input.letter').click(function () 
                //0- prepare values
                var qsTargeted = 'letter=' + this.value; //"letter=A";
                var windowUrl = '';
                var qskey = qsTargeted.split('=')[0];
                var qsvalue = qsTargeted.split('=')[1];
                //1- get row url
                var originalURL = window.location.href;
                //2- get query string part, and url
                if (originalURL.split('?').length > 1) //qs is exists
                
                    windowUrl = originalURL.split('?')[0];
                    var qs = originalURL.split('?')[1];
                    //3- get list of query strings
                    var qsArray = qs.split('&');
                    var flag = false;
                    //4- try to find query string key
                    for (var i = 0; i < qsArray.length; i++) 
                        if (qsArray[i].split('=').length > 0) 
                            if (qskey == qsArray[i].split('=')[0]) 
                                //exists key
                                qsArray[i] = qskey + '=' + qsvalue;
                                flag = true;
                                break;
                            
                        
                    
                    if (!flag)//   //5- if exists modify,else add
                    
                        qsArray.push(qsTargeted);
                    
                    var finalQs = qsArray.join('&');
                    //6- prepare final url
                    window.location = windowUrl + '?' + finalQs;
                
                else 
                    //6- prepare final url
                    //add query string
                    window.location = originalURL + '?' + qsTargeted;
                
            )
        );

【参考方案3】：

基于这个讨论，我创建了一个引用函数。享受

updateUrlParameter(url, param, value)
    var regex = new RegExp("/([?|&]" + param + "=)[^\&]+/");
    return url.replace(regex, '$1' + value);

【讨论】：

我很难让它工作，直到我意识到你需要删除前导和结束正斜杠。我猜这些是自动存在的，如果你把它们放到你的字符串中，最终会加倍。

【参考方案4】：

基于这个讨论，我已经修复了 Chris 函数（正则表达式字符串的问题！）

function updateUrlParameter(url, param, value)
    var regex = new RegExp('('+param+'=)[^\&]+');
    return url.replace( regex , '$1' + value);

【讨论】：

您最后的 2 个 cmets 只是重写了一个已接受的答案...请仅在您提供的信息多于已接受的信息时才回答已解决的问题。如果没有，只需投票接受的答案。

【参考方案5】：

我花了几个小时寻找这个解决方案，最后偶然发现了这个问题。我已经尝试了这里的所有解决方案。但是在替换 url 中的特定参数值时仍然存在问题。 让我们采取一个示例网址，例如

http://google.com?param1=test1&param2=test2&anotherparam1=test3

更新后的网址应该是这样的

http://google.com?param1=newtest&param2=test2&anotherparam1=test3，其中param1 的值已更改。

在这种情况下，正如@Panthro 所指出的，在查询字符串之前添加[?|&] 可以确保anotherparam1 不会被替换。但是这个解决方案还添加了“？”或 '&' 字符到匹配的字符串。因此，在替换匹配的字符时，“？”或 '&' 也将被替换。您将无法确切知道替换了哪个字符，因此您也无法附加该字符。

解决方案是匹配 '?'或 '&' 仅作为前置字符。

我重写了@Chris的函数，修复了字符串的问题，并添加了不区分大小写的参数。

updateUrlParameter(url, param, value)
    var regex = new RegExp('(?<=[?|&])(' + param + '=)[^\&]+', 'i');
    // return url.replace(regex, param + '=$1' + value);
    return url.replace(regex, param + '=' + value);

这里(?<=[?|&]) 表示，正则表达式将匹配“？”或 '&' 字符，并将采用指定字符之后出现的字符串（查找字符后面）。这意味着只有param1=test1 子字符串会被匹配和替换。

【讨论】：

垃圾代码。 updateUrlParameter("/fileserver.aspx?mid=1&t=SGK&id=0&f=File2&p=w","id","23954");返回“/fileserver.aspx?mid=1&t=SGK&id=id=23954&f=File2&p=w”

更新了这行的一个小错误return url.replace(regex, param + '=$1' + value);之前没注意到。感谢您指出。更正将是return url.replace(regex, param + '=' + value);

Positive lookbehind 即?<= 不受许多浏览器支持。另一种方法是使用单词边界，即\b。示例queryString.replace(/\bsource=[^&]+/, 'source=' + value)，其中source 是我们感兴趣的参数名称。

【参考方案6】：

我知道这是一个有点脏的代码，但我已经实现了我想要的。它替换给定的查询字符串，如果它不存在则添加新的。

function updateUrlParameter(url, param, value) 

    var index = url.indexOf("?");

    if (index > 0) 

        var u = url.substring(index + 1).split("&");

        var params = new Array(u.length);

        var p;
        var found = false;

        for (var i = 0; i < u.length; i++) 
            params[i] = u[i].split("=");
            if (params[i][0] === param) 
                params[i][1] = value;
                found = true;
            
        

        if (!found) 
            params.push(new Array(2));
            params[params.length - 1][0] = param;
            params[params.length - 1][1] = value;
        

        var res = url.substring(0, index + 1) + params[0][0] + "=" + params[0][1];
        for (var i = 1; i < params.length; i++) 
            res += "&" + params[i][0] + "=" + params[i][1];
        
        return res;

     else 
        return url + "?" + param + "=" + value;
    

当给定常规 URL 地址时它会起作用，例如：

updateUrlParameter('https://www.example.com/some.aspx?mid=1&id=2','id','5');
updateUrlParameter('https://www.example.com/?mid=1&id=2','id','5');
updateUrlParameter('https://www.example.com/some.aspx','id','5');

请注意只有当任何查询字符串参数名称或值包含“=”和/或“&”字符时，它才会起作用。它会在这之后工作得很好。