是否有一种简单的 JavaScript 方法来操作任意 URL？答案

【问题标题】：Is there a simple JavaScript way to manipulate arbitrary URLs?是否有一种简单的 JavaScript 方法来操作任意 URL？
【发布时间】：2009-08-18 13:27:50
【问题描述】：

有没有一种方法可以轻松处理 JavaScript 中的 URL 操作？

一点上下文：

我想使用ThickBox，流行的jQuery 模态弹出框，但不显眼。根据ThickBox 文档，我必须为所有我想成为模态的链接提供一个CSS 类的“thickbox”，并将URL 更改为...

http://www.mysite.com/mypopup

...到：

http://www.mysite.com/mypopup?height=200&width=300

我只想在启用 JavaScript 的情况下实现这一点。

所以我使用 jQuery 获取所有链接并“破解”检测“？” URL 中的字符，相应地附加“&height...”或“?height...”。

在更宏大的计划中，如果 URL 已经有一个“height”参数，这可能会使事情变得混乱，在这种情况下，我可能只想更新现有的，而不是给它两个。

这一切都有点味道。

我觉得我正在破解可以/必须已经正确完成的代码！

所以我的问题是：

在 JavaScript 世界中是否有什么东西可以让我做这样的事情：

var url = Url(elm.attr("href"));
url.parameter("width", "300");
url.parameter("height", "200");
elm.attr("href", url.toString())

或者：

var height = Url(elm.attr("href")).parameter("height");

【问题讨论】：

标签： javascript jquery url

【解决方案1】：

这个函数就是这么做的，只要在你要解析的URL的页面上调用它：

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

//for the URL http://www.mysite.com/mypopup?height=200&width=300

var height = gup( 'height' );
var width = gup('width');
alert('Height: ' + height + ' Width: ' + width);

编辑：我不知道这会有多大用处（因为它使用 Prototype.js），但这是用于读取和修改查询字符串：

http://code.nontalk.com/2006/10/readmodify-querystring-variables-with.html

【讨论】：

很好.. 但这不允许我设置 URL 查询字符串参数。关键在于操纵 URL（或者 HREF 可能是更好的表达方式）。我可以很容易地更新此方法以将 URL 作为参数（而不是使用 window.location.href），但它不允许我更改或添加查询字符串参数。
我之前的评论现在是关于一个完全不同的答案！
@joshcomley - 我把它都放回去了，所以你的评论再次有意义。
+1 进行编辑，虽然我可能不会使用它，因为我不想同时拥有 jQuery 和 Prototype，但了解一下很有用！

【解决方案2】：

是的。 javascript 中的location 对象有quite a lot of properties。

对于您的问题：location.search = "width=300"; 会将“?width=300”应用于您的网址。

【讨论】：

这又近了一步，但是如果有 10 个参数，而我只想更新一个呢？我可以对其进行正则表达式，但它再次看起来“hacky”并且喜欢以前一定有人做过的事情，但比我更好;）

【解决方案3】：

您可能可以使用 jQuery 来做到这一点，即

$(".thickbox").each(function() {
  this.href += "?height=200&width=300";
});

我没有对此进行过测试，它可能是错误的，我目前无法对其进行测试，但如果没有其他问题，希望它能为您指明正确的方向。如果你有用于Thickbox 的jQuery，那么你也可以利用它来进行操作；）

【讨论】：