Question

我想知道如何向现有网址添加新参数。问题是：网址还可能包含锚点。

例如：

http://www.example.com?foo=bar#hashme

我想为它添加另一个参数，因此导致：

http://www.example.com?foo=bar&x=y#hashme

Answer 1

我使用了 The Awesome One 的部分解决方案，并在此问题上找到了解决方案：

Adding a parameter to the URL with JavaScript

将它们组合到此脚本中：

function addParameter(url, parameterName, parameterValue, atStart/*Add param before others*/){
    replaceDuplicates = true;
    if(url.indexOf('#') > 0){
        var cl = url.indexOf('#');
        urlhash = url.substring(url.indexOf('#'),url.length);
    } else {
        urlhash = '';
        cl = url.length;
    }
    sourceUrl = url.substring(0,cl);

    var urlParts = sourceUrl.split("?");
    var newQueryString = "";

    if (urlParts.length > 1)
    {
        var parameters = urlParts[1].split("&");
        for (var i=0; (i < parameters.length); i++)
        {
            var parameterParts = parameters[i].split("=");
            if (!(replaceDuplicates && parameterParts[0] == parameterName))
            {
                if (newQueryString == "")
                    newQueryString = "?";
                else
                    newQueryString += "&";
                newQueryString += parameterParts[0] + "=" + (parameterParts[1]?parameterParts[1]:'');
            }
        }
    }
    if (newQueryString == "")
        newQueryString = "?";

    if(atStart){
        newQueryString = '?'+ parameterName + "=" + parameterValue + (newQueryString.length>1?'&'+newQueryString.substring(1):'');
    } else {
        if (newQueryString !== "" && newQueryString != '?')
            newQueryString += "&";
        newQueryString += parameterName + "=" + (parameterValue?parameterValue:'');
    }
    return urlParts[0] + newQueryString + urlhash;
};

示例：addParameter('http://www.example.com?foo=bar#hashme', 'bla', 'valuebla', false)

http://www.example.com?foo=bar&bla=valuebla#hashme

中的结果

Answer 2

这可能是另一个很好的解决方案，如果参数已经存在，该版本甚至可以替换参数，添加参数没有值：

function addParam(url, param, value) {
   var a = document.createElement('a'), regex = /(?:\?|&amp;|&)+([^=]+)(?:=([^&]*))*/g;
   var match, str = []; a.href = url; param = encodeURIComponent(param);
   while (match = regex.exec(a.search))
       if (param != match[1]) str.push(match[1]+(match[2]?"="+match[2]:""));
   str.push(param+(value?"="+ encodeURIComponent(value):""));
   a.search = str.join("&");
   return a.href;
}

url = "http://www.example.com#hashme";
newurl = addParam(url, "ciao", "1");
alert(newurl);

http://jsfiddle.net/bknE4/81/

Answer 3

试试这个：

location.href = location.href.replace(location.hash, '') + '&x=y' + location.hash

<强>更新

这个怎么样：

var a = document.createElement('a');
a.href = "http://www.example.com?foo=bar#hashme";

var url = a.href.replace(a.hash, '') + '&x=y' + a.hash;

我发现位置对象可以由锚元素（来自Creating a new Location object in javascript）创建。

Answer 4

您可以使用名为URI.JS

的JS库

group by

或

// mutating URLs
URI("http://example.org/foo.html?hello=world")
    .username("rodneyrehm") 
        // -> http://rodneyrehm@example.org/foo.html?hello=world
    .username("") 
        // -> http://example.org/foo.html?hello=world
    .directory("bar")
        // -> http://example.org/bar/foo.html?hello=world
    .suffix("xml")    
        // -> http://example.org/bar/foo.xml?hello=world
    .hash("hackernews")
        // -> http://example.org/bar/foo.xml?hello=world#hackernews
    .fragment("")
        // -> http://example.org/bar/foo.xml?hello=world
    .search("") // alias of .query()
        // -> http://example.org/bar/foo.xml
    .tld("com")
        // -> http://example.com/bar/foo.xml
    .search({ foo: "bar", hello: ["world", "mars"] });
        // -> http://example.com/bar/foo.xml?foo=bar&hello=world&hello=mars

Answer 5

易。

<script>
function addPar(URL,param,value){
var url = URL;
var hash = url.indexOf('#');
if(hash==-1)hash=url.length;
var partOne = url.substring(0,hash);
var partTwo = url.substring(hash,url.length);
var newURL = partOne+'&'+param+'='+value+partTwo
return newURL;
}
document.write(addPar('http://www.example.com?foo=bar','x','y')) // returns what you asked for
</script>

代码可以稍微修改一下，效率更高，但这应该可以正常工作。

@Sangol的解决方案更好。不知道location.hash属性存在。

Answer 6

以下是@skerit对答案的改进版本。这个支持URL路径中的#。

function addParameter(url, parameterName, parameterValue, atStart/*Add param before others*/) { 

    var replaceDuplicates = true;
    var cl, urlhash;

    parameterName = encodeURIComponent(parameterName);
    parameterValue = encodeURIComponent(parameterValue);

    if (url.lastIndexOf('#') > 0) {
        cl = url.lastIndexOf('#');
        urlhash = url.substring(cl, url.length);
    } else {
        urlhash = '';
        cl = url.length;
    } 

    var sourceUrl = url.substring(0, cl);
    var urlParts = sourceUrl.split("?");
    var newQueryString = "";

    if (urlParts.length > 1) {
        var parameters = urlParts[1].split("&");
        for (var i=0; (i < parameters.length); i++) {
            var parameterParts = parameters[i].split("=");
            if (!(replaceDuplicates && parameterParts[0] === parameterName)) {
                if (newQueryString === "") {
                    newQueryString = "?";
                } else {
                    newQueryString += "&";
                }
                newQueryString += parameterParts[0] + "=" + (parameterParts[1]?parameterParts[1]:'');
            }
        }
    } 

    if (newQueryString === "") {
        newQueryString = "?";
    }

    if (atStart) {
        newQueryString = '?'+ parameterName + "=" + parameterValue + (newQueryString.length>1?'&'+newQueryString.substring(1):'');
    } else {
        if (newQueryString !== "" && newQueryString != '?') {
            newQueryString += "&";
        }
        newQueryString += parameterName + "=" + (parameterValue?parameterValue:'');
    }
    return urlParts[0] + newQueryString + urlhash;
}

示例：

addParameter('http://www.example.com?foo=bar#hashme', 'bla', 'valuebla', false);
// Returns: http://www.example.com?foo=bar&bla=valuebla#hashme
addParameter('http://www.example.com/#iAmNotUrlHash/?foo=bar#hashme', 'bla', 'valuebla', false);
// Returns: http://www.example.com/#iAmNotUrlHash/?foo=bar&bla=valuebla#hashme

Answer 7

这样的东西？

var param = "x=y";
var split = url.split('#');
url = split[0] + '&' + param + "#" + split[1];

Answer 8

我总是使用这段代码，而且工作正常...

var currenturl=location.href;
var url = location.href+"?ts="+true;
window.location.replace(url,"_self");

Answer 9

@freedev答案很棒，但如果你需要一些非常简单的东西（将key = value对插入url并假设密钥尚不存在），那么有一种更快的方法：

var addSearchParam = function(url,keyEqualsValue) {

    var parts=url.split('#');
    parts[0]=parts[0]+(( parts[0].indexOf('?') !== -1) ? '&' : '?')+keyEqualsValue;
    return parts.join('#');

}

用法示例：addSearchParam（'http://localhost?a=1#hash'，'b = 5'）;

如何将参数添加到已包含其他参数且可能是锚点的URL

9 个答案: