如何使用JavaScript（也可以使用jQuery）解析URL？
例如，我的字符串中有以下内容：
url = "http://example.com/form_image_edit.php?img_id=33"
我想获取img_id的值。
我知道使用PHP的parse_url()可以轻松实现，但我想知道如何用JavaScript实现。
JavaScript中解析URL
77
- Run
4
13个回答
123
您可以使用一个技巧，创建一个 a 元素，将 URL 添加到其中，然后使用其 Location 对象。
function parseUrl( url ) {
var a = document.createElement('a');
a.href = url;
return a;
}
parseUrl('http://example.com/form_image_edit.php?img_id=33').search
将输出：?img_id=33
你也可以使用php.js在JavaScript中获取parse_url函数。
更新（2012-07-05）
如果需要进行更复杂的URL处理，我建议使用优秀的URI.js库。
- Sindre Sorhus
11
4等价于
url.match(/\?.+/)[0]，这样写更短，速度可能也更快。 - RobG9哇，我从未听说过这个技巧，经过整理所有世界上最难看的正则表达式后，它让我的一天变得更加美好 =) - Greg Guida
2@Christophe 不，它会显示可用的属性。当您将URL分配给锚元素的href属性时，它会获取Location对象的所有属性。 - Sindre Sorhus
1@SindreSorhus 太棒了！你能分享一下说明它并详细解释浏览器支持的参考资料吗？这对于具有 src 属性（例如链接、iframe）的元素也适用吗？ - Christophe
1window.location.search - Adam Spence
显示剩余6条评论
36
如果您的字符串叫做s，那么
var id = s.match(/img_id=([^&]+)/)[1]
会给你它。
- Ray Toal
10
试一下这个：
var url = window.location;
var urlAux = url.split('=');
var img_id = urlAux[1]
- mdaguerre
1
使用此方法后，我该如何找到它被分成了多少个部分？ - Tyler
7
一句话概括：
location.search.replace('?','').split('&').reduce(function(s,c){var t=c.split('=');s[t[0]]=t[1];return s;},{})
- Ilya Kharlamov
1
5好的，用JS编程时，所有东西都可以被写成一行代码:P - Realitätsverlust
4
我从谷歌上找到了这个方法，你可以尝试使用它。
function getQuerystring2(key, default_)
{
if (default_==null)
{
default_="";
}
var search = unescape(location.search);
if (search == "")
{
return default_;
}
search = search.substr(1);
var params = search.split("&");
for (var i = 0; i < params.length; i++)
{
var pairs = params[i].split("=");
if(pairs[0] == key)
{
return pairs[1];
}
}
return default_;
}
- kobe
1
2如果查询参数的值包含'%3D'（'='）或'%26'（'&'），则此操作将失败。为了解决这个问题，在for循环内使用以下代码：
if (pairs.shift() == key) {
return pairs.join('=');
}
```` 并在按'＆'拆分后进行反转义。 - michielbdejong3
这应该可以解决kobe的答案中的一些边界情况:
function getQueryParam(url, key) {
var queryStartPos = url.indexOf('?');
if (queryStartPos === -1) {
return;
}
var params = url.substring(queryStartPos + 1).split('&');
for (var i = 0; i < params.length; i++) {
var pairs = params[i].split('=');
if (decodeURIComponent(pairs.shift()) == key) {
return decodeURIComponent(pairs.join('='));
}
}
}
getQueryParam('http://example.com/form_image_edit.php?img_id=33', 'img_id');
// outputs "33"
- michielbdejong
2
以下代码应该适用于您。即使有多个查询字符串值，此函数也应返回所需键的值。
function getQSValue(url)
{
key = 'img_id';
query_string = url.split('?');
string_values = query_string[1].split('&');
for(i=0; i < string_values.length; i++)
{
if( string_values[i].match(key))
req_value = string_values[i].split('=');
}
return req_value[1];
}
- Mittal Patel
2
我写了一个JavaScript URL解析库，URL.js，你可以使用它来完成此操作。
示例：
url.parse("http://mysite.com/form_image_edit.php?img_id=33").get.img_id === "33"
- Kevin Cox
3
不，我以前从未听说过purl.js。 - Kevin Cox
您的上一个回答之上有一个答案。您的代码比purl快28倍，并且更加简洁，但是我不能在其当前状态下使用它。我已经在github上为您创建了一个问题，请查看。谢谢。 - Steven Vachon
2你只是忘记运行构建步骤了。然而，新版本不再需要构建步骤，所以现在无需担心它 :D - Kevin Cox
1
function parse_url(str, component) {
// discuss at: http://phpjs.org/functions/parse_url/
// original by: Steven Levithan (http://blog.stevenlevithan.com)
// reimplemented by: Brett Zamir (http://brett-zamir.me)
// input by: Lorenzo Pisani
// input by: Tony
// improved by: Brett Zamir (http://brett-zamir.me)
// note: original by http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js
// note: blog post at http://blog.stevenlevithan.com/archives/parseuri
// note: demo at http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js
// note: Does not replace invalid characters with '_' as in PHP, nor does it return false with
// note: a seriously malformed URL.
// note: Besides function name, is essentially the same as parseUri as well as our allowing
// note: an extra slash after the scheme/protocol (to allow file:/// as in PHP)
// example 1: parse_url('http://username:password@hostname/path?arg=value#anchor');
// returns 1: {scheme: 'http', host: 'hostname', user: 'username', pass: 'password', path: '/path', query: 'arg=value', fragment: 'anchor'}
var query, key = ['source', 'scheme', 'authority', 'userInfo', 'user', 'pass', 'host', 'port',
'relative', 'path', 'directory', 'file', 'query', 'fragment'
],
ini = (this.php_js && this.php_js.ini) || {},
mode = (ini['phpjs.parse_url.mode'] &&
ini['phpjs.parse_url.mode'].local_value) || 'php',
parser = {
php: /^(?:([^:\/?#]+):)?(?:\/\/()(?:(?:()(?:([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?()(?:(()(?:(?:[^?#\/]*\/)*)()(?:[^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/\/?)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/ // Added one optional slash to post-scheme to catch file:/// (should restrict this)
};
var m = parser[mode].exec(str),
uri = {},
i = 14;
while (i--) {
if (m[i]) {
uri[key[i]] = m[i];
}
}
if (component) {
return uri[component.replace('PHP_URL_', '')
.toLowerCase()];
}
if (mode !== 'php') {
var name = (ini['phpjs.parse_url.queryKey'] &&
ini['phpjs.parse_url.queryKey'].local_value) || 'queryKey';
parser = /(?:^|&)([^&=]*)=?([^&]*)/g;
uri[name] = {};
query = uri[key[12]] || '';
query.replace(parser, function($0, $1, $2) {
if ($1) {
uri[name][$1] = $2;
}
});
}
delete uri.source;
return uri;
}
- Muhammad Tahir
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
window.location.search.split('=')[1]时。我简直不敢相信他得到了75票！！ - Adam Spence