使用JavaScript向URL添加/修改查询字符串/GET变量

5

我想要替换URL中的GET变量值,如果该变量不存在,则将其添加到URL中。

编辑:我是在元素href中执行此操作,而不是当前页面位置。

虽然我不擅长JavaScript,但我非常了解如何使用jQuery以及JavaScript的基础知识。我知道如何编写正则表达式,但不知道如何使用JavaScript语法和哪些函数。

这是我目前的代码,第3行出现了错误:在jsfiddle上查看(或下面):http://jsfiddle.net/MadLittleMods/C93mD/

function addParameter(url, param, value) {
    var pattern = new RegExp(param + '=(.*?);', 'gi');
    return url.replace(pattern, param + '=' + value + ';');

    alert(url);
}

1
注意:一旦更改页面的URL,浏览器将导航到该位置,因此您只能更改一次。 - Diodeus - James MacFarlane
1
我可以随意更改它多少次。我正在编辑元素的href而不是页面。 - MLM
4个回答

15

不需要在这里使用jQuery。正则表达式和字符串函数足以解决问题。请参见下面我加了注释的代码:

function addParameter(url, param, value) {
    // Using a positive lookahead (?=\=) to find the
    // given parameter, preceded by a ? or &, and followed
    // by a = with a value after than (using a non-greedy selector)
    // and then followed by a & or the end of the string
    var val = new RegExp('(\\?|\\&)' + param + '=.*?(?=(&|$))'),
        parts = url.toString().split('#'),
        url = parts[0],
        hash = parts[1]
        qstring = /\?.+$/,
        newURL = url;

    // Check if the parameter exists
    if (val.test(url))
    {
        // if it does, replace it, using the captured group
        // to determine & or ? at the beginning
        newURL = url.replace(val, '$1' + param + '=' + value);
    }
    else if (qstring.test(url))
    {
        // otherwise, if there is a query string at all
        // add the param to the end of it
        newURL = url + '&' + param + '=' + value;
    }
    else
    {
        // if there's no query string, add one
        newURL = url + '?' + param + '=' + value;
    }

    if (hash)
    {
        newURL += '#' + hash;
    }

    return newURL;
}

这是Fiddle

更新:

现在的代码可以处理URL中有散列符号(hash)的情况。

编辑:

之前漏了一个情况!现在代码会检查是否存在查询字符串


1
更新并添加了读取函数到这个 fiddle。我使用了 (;|&|$) 而不是你的 (&|$) -- http://jsfiddle.net/MadLittleMods/4Pz8h/ - MLM
1
用[\?&]代替(\?|\&)怎么样? - Christophe
1
不处理URL上的哈希。 - Joao Leme
1
这段代码看起来就是一个很好的例子,说明为什么你应该闭嘴,直接使用jQuery。由于新的bug随机出现,这段代码已经被编辑了无数次,耗费了谁知道多少开发人员的时间,而我们甚至还不知道它是否真正有效。jQuery很重,因为它已经经历了这个过程。任何人都可以“编写更快的函数X”,但是他们会遗漏导致错误的无数边角情况。而且我们甚至还没有谈到JavaScript本身使这变得困难的方式。 - John Tyree
@JohnTyree 当然,在过去的三年中,我已经提高了我的JavaScript水平。现在我只会使用window.location.search.split('&') - Ryan Kinal
显示剩余4条评论

1

0
<script type="text/javascript">
    $(document).ready(function () {
        $('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;
            }
        })
    });
</script>

0
请参考更改URL参数。它以更通用的方式回答了您的问题(更改任何URL参数)。在答案部分中,有jQuery和常规js的解决方案。
另外,看起来url.replace应该是location.replace,但我可能错了(这个说法基于快速搜索“url.replace javascript”)。

这很接近了,我猜我需要使用他的新插件BBQ:http://benalman.com/projects/jquery-bbq-plugin/ - 这是为1.4 jQuery设计的,而我正在使用1.6.4版本 - 我正在使用这个URL(?action=expand;)。我的jQuery代码如下:http://jsfiddle.net/RVCyu/ - 但它似乎没有起作用。 - MLM
请参考以下网址:http://www.netlobo.com/url_query_string_javascript.html 或 http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html。 - jtfairbank
我不是在尝试读取值,而是在尝试修改/添加它们。 - MLM

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接