获取 URL 变量 | CSS-Tricks

kidi

# 2009年10月27日

Requests = {
QueryString : function(item){
var svalue = location.search.match(new RegExp(“[\?\&]” + item + “=([^\&]*)(\&?)”,”i”));
return svalue ? svalue[1] : svalue;
}
}

//用法
Requests.QueryString(“id”);

badcrocodile

评论永久链接# 2014年9月12日

很棒的代码片段，但将这段代码中的弯引号更改为双引号。
Dave Land

评论永久链接# 2017年3月4日

很棒，简洁的代码片段。它在我的使用场景中有效。考虑到网络上数据的变化，肯定存在一些边缘情况会导致它失效，但到目前为止，这块已有7年半历史的黄金仍然为我们服务良好！

sghakgun

# 2010年2月20日

不错！谢谢。

Jack

# 2010年2月20日

很棒的工作，这是一段非常棒的代码！一如既往，继续加油！

JLesuperb

评论永久链接# 2015年4月1日

你说得对

Rene Merino

# 2010年2月20日

不错，非常有用，谢谢！！

Sergei Filippov

# 2010年2月21日

谢谢 Chris，非常有用的脚本。今天就要用到它 :D

anup

# 2011年9月23日

太棒了!!!!!!!

Uzair

# 2012年2月1日

我可以在我的网站上移除 .html 扩展名吗？我的网站使用基于 Windows 的主机。

我不知道服务器是否安装了 Isapi_rewrite。

此致

rully

# 2012年5月7日

我认为该行 = return (false) 如果您的 URL 获取多个变量，则会产生错误。false 可能会中断循环并仅返回 URL 中的第一个变量..

我认为应该删除该行..

此致，

附注：如果我错了，请见谅 :)

Patrick McDougle

评论永久链接# 2012年11月6日

我认为您可能误读了括号。在 for 循环搜索完所有 vars（名称-值对）并且没有找到 variable 后，此函数返回 false。

Neil

# 2012年6月19日

太棒了！非常感谢！

elhoussaine

# 2012年7月27日

嗨，我的朋友们，如果我说英语请不要见怪，但我不会说法语，所以
我在我创建的一个脚本中遇到了这种情况
page.html?nom=28/09/1986&from=hossa&too=hisok
我想获取变量 nom、from 和 too 的名称
我尝试了许多脚本，但它们对我不起作用
请您告诉我如何在 javascript 中实现它吗？
非常感谢

Patrick McDougle

评论永久链接# 2012年11月6日

我认为这就是这篇文章要讨论的内容。

只需调用上面定义的函数。

getQueryVariable("nom"); – 将返回“28/09/1986”。
getQueryVariable("from"); – 将返回“hossa”。
getQueryVariable("too"); – 将返回“hisok”。

Thomas Welton

# 2012年12月18日

如果要复制粘贴，我想在 CoffeeScript 中使用它，这对我有用
getQueryVariable = (variable) -> query = window.location.search.substring(1)


for el in query.split "&"
            pair = el.split "="
    return pair[1] if pair[0] is variable

return false

制表符乱了

Robert Galindo

# 2014年2月24日

添加了另一个 if 语句来检查参数中的空格字符“%20”

function getQueryVariable(variable) {
var query = window.location.search.substring(1)
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=")
    if(pair[0] == variable){
        if(pair[1].indexOf('%20')){
            var fullName = pair[1].split('%20')
            return fullName[0] + ' ' + fullName[1]
        }
        else {
            return pair[1];
        }
    }
}
return(false)

}

Robert Galindo

# 2014年2月24日

糟糕，我忘记了“!= -1”，抱歉。以下是正确的代码

function getQueryVariable(variable) {
var query = window.location.search.substring(1)
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=")
    if(pair[0] == variable){
        if(pair[1].indexOf('%20') != -1){
            console.log(pair[1].indexOf('%20'))
            var fullName = pair[1].split('%20')
            console.log(fullName)
            return fullName[0] + ' ' + fullName[1]
        }
        else {
            return pair[1];
        }
    }
}
return(false)

}

Kat

# 2014年2月25日

有没有人有实际的表单链接，其中实现了类似的东西，我可以作为示例查看？抱歉，我对 javascript 不是很了解，在弄清楚如何设置它时遇到了很多麻烦。我认为我做了一些非常基础的错误，但我无法弄清楚是什么。

Robert Galindo

评论永久链接# 2014年2月26日

嗨，Kat。我创建了一个 Codepen 来实现上面的代码。

http://codepen.io/anon/pen/ympzk?fname=kat

Relfor

# 2014年3月2日

嗨，Chris，
如果我没记错的话，需要对参数进行 URL 解码。
在此处查看此解决方案：http://stackoverflow.com/a/901144

Howie

# 2014年3月10日

我正在通过 URL 传递查询（http://www.mywebsite.com/appointment-map.aspx?search=33612），我想在以下内容（urlsearch）中使用该查询对象，但似乎无法使其工作。

kosmos

# 2014年3月20日

除了 Robert Galindo 的代码之外

function QueryString(variable){
            try{
                q = location.search.substring(1);
                v = q.split("&");
                for( var i = 0; i < v.length; i++ ){
                    p = v[i].split("=");
                    if( p[0] == variable ){
                        if( p[1].indexOf('%20') != -1 ){
                            n = [];
                            for( var j = 0; j < p[1].split('%20').length; j++ ){
                                n.push(p[1].split('%20')[j]);
                            }
                            str = "";
                            for( var k = 0; k < n.length; k++ ){
                                str += n[k] + ' ';
                            }
                            return str.trim();
                        }
                        else{
                            return p[1];
                        }
                    }
                }
            }
            catch (e){
                console.log(e);
            }
        }

现在我们可以在第一个 %20 之后获取更多数据，我的意思是，所有包含空格的数据，例如 uri.html?data=more%20than%20one%20space

我在 stackoverflow.com 上找到了关于“split”和“regex”速度的信息

Split method: 144,780 ±2.17% fastest
Regex method: 13,891 ±0.85% | 90% slower

此致。

kosmos

# 2014年3月20日

此外，正如 Relfor 所说，使用 decodeUriComponent 我们无需查找空格（%20）或其他符号（如重音符号）。更少的代码行，更好的结果

function QueryString(variable){
        try{
            q = location.search.substring(1);
            v = q.split("&");
            for( var i = 0; i < v.length; i++ ){
                p = v[i].split("=");
                if( p[0] == variable ){
                    if( p[1].indexOf('%20') != -1 ){
                        return decodeURIComponent(p[1]);
                    }
                    else{
                        return p[1];
                    }
                }
            }
        }
        catch (e){
            console.log(e);
        }
    }

此致。

Uhelliton Andrade

# 2014年7月16日

很棒的作品！愿上帝保佑我的朋友

Thiago Romão Barcala

# 2014年8月13日

一种函数式方法 (:P)

function QueryString(variable) {
    return location.search.substring(1).split("&")
        .map(function (p) { return p.split("=") })
        .filter(function (p) { return p[0] == variable })
        .map(function (p) { return decodeURIComponent(p[1]) })
        .pop();
}

Ludovic Urbain

# 2014年9月26日

更好的是，不要为每个查询字符串参数都执行一次工作。

function read_query_string(){
    var a=window.location.search.split(/\?/);
    var b=a[1].split("&");
    var c={};
    for(var i=0;i<b.length;i++){
        var d=b[i].split("=");
        c[d[0]]=d[1];
    }
    return c;
}

setiawan

# 2015年1月4日

如何将此函数与 if/else 结合使用？

示例
您有这个 URL www.domain.com?id=1234&img=test.jpg

条件
如果 id=xxxx，则执行 blablabla，否则执行其他操作。

我可以使用什么脚本来声明该条件？
请帮忙。谢谢…

jayapoorni

# 2015年1月23日

我需要您帮助检查 URL 中的最后 3 个字符。
例如
http://www.google.com
必须检查最后 3 个字符，这些字符从点(.) 开始。
例如
http://www.domainname.xxx
如果最后 3 个字符错误，则应跳转到任何警报消息页面。请帮助我

sadashiv

# 2015年2月3日

谁能解释一下如何使用 jquery 重写 url。
描述

我想通过删除其中的文件夹路径来重写 url。
目前我正在使用 asp.net 路由，这是一个成本高昂的过程，因此如果有人能为此提供解决方案，将非常有帮助。

例如：products/cloths/jeans.aspx 必须重写为 jeans.aspx

提前感谢。

Richard

# 2015年5月1日

我实现了原始代码，如果变量存在，id 确实会返回 url 变量值，否则它会返回 false。变量不存在时返回的 false 不是字符串值，而是我假设的 javascript 布尔值？我的问题是如何测试 false 返回值，然后采取操作？我想验证是否进行了选择，该选择在查询字符串中传递了一个值，如果没有，则向用户显示一条消息。感谢任何帮助。

Max

# 2015年7月20日

大家好！代码很棒！如果我在后台页面运行此代码，您能否告诉我如何获取当前选项卡的 URL？如果我想从上下文菜单调用此代码，有什么想法吗？

redcom

# 2015年9月8日

您可以使用以下方法获取表示查询参数的项目数组

array = location.search.match(/\w+(.=)?\w*/gi)

您可以得到类似的东西，并且可以非常轻松地映射到对象
[“app_id”, “123”, “appcode”, “123”]

Ben

# 2015年10月13日

这可能是一个愚蠢的问题，但我注意到 return (false) 这行代码

这与更常见的 return false（无括号）有什么区别？

joe

# 2015年10月28日

代码不错，但如果您正在查找第一个元素，它不起作用。

调用 getQueryVariable(“id”) – 应该返回“1”。但它没有。

joe

评论永久链接# 2015年10月28日

我应该澄清一下。我修改了函数以接受 url 字符串。
function getQueryVariable(url, variable) { var query = url; var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); }

Maxime

# 2016年4月7日

谢谢！！

Shubham Kumar

# 2016年5月8日

这是我正在使用的简单正则表达式代码

function getQuery(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
        return decodeURIComponent(name[1]);
}

var id = getQuery("id");

来源：http://mycodingtricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

Hlawu M

# 2016年8月24日

很棒的工作！但是如果我在下面的 URL 中有这样的查询字符串呢？

获取 URL 变量

这将发送“John”而不是预期的“John & James”……只是一个想法。

Bryan

评论永久链接# 2018年5月20日

如果您的值中包含“&”，则您的值格式错误。您必须对其进行 URL 编码。在 url 查询中，“&”表示开始下一个变量。

Omur

# 2016年10月31日

感谢您的帮助（

Kovin

# 2017年2月1日

如果我想返回默认值怎么办？

例如
http://www.example.com/index.php?id=1&image=awesome.jpg
调用 getQueryVariable(“id”) – 将返回“1”。
调用 getQueryVariable(“image”) – 将返回“awesome.jpg”。

如果
http://www.example.com/index.php
我仍然希望返回“id”值 =“预定义值”

Amber

# 2017年4月26日

你好，

谁能向我展示如何在 html 中应用它？我对 JS 几乎没有经验。我尝试了数十次迭代并检查了许多网站，我已束手无策。

我 URL 末尾的查询字符串是 ?foo=jim。我在文档头部内部有 JS 函数。

我需要将“jim”插入为隐藏输入字段的值。以下是为使此功能正常工作而尝试的众多迭代之一。

<input type="hidden" name="application-id" value=" getQueryVariable('foo')" />.

谁能告诉我我在这里到底哪里错了？

非常感谢，

Amber

Jared

# 2017年8月11日

你好，Amber，
我遇到了您在这篇文章中提到的相同问题，我想知道您是否已经找到了解决方案？

Liberator

# 2017年9月23日

@joe – 只需更改您的行

var query = url; </div>
至

var query = url.split('?')[1];

这将分离出 url 的查询部分。

Naits

# 2018年6月25日

太棒了。

我之前已经有一个 youtube url，只需要视频 ID。
我发现了这个非常好的解决方案

创建一个链接，设置 href，现在您也可以使用“location.search”。
所以我只是将其添加到上面的函数中。

var link = document.createElement("a");
link.href = YOURURL;
var query = link.search.substring(1);

这应该也适用于旧版浏览器。我自己没有测试过，但应该可以一直使用到 IE 5.5

Neil

# 2018年7月30日

此技术仅在完全按照描述设置时才返回“false”。

链接设置：/test.html?id=1&image=awesome.jpg

function getQueryVariable(id)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == id){return pair[1];}
       }
       return(false);
}
        alert(getQueryVariable());

Marina Miller

# 2019年8月28日

非常感谢！这太棒了

NostraDavid

# 2020年6月25日

我从 MDN 获取了这个：https://mdn.org.cn/en-US/docs/Web/API/URLSearchParams

(new URLSearchParams(window.location.search)).get('myParam');

David Spector

# 2021年6月26日

window.location 对于标签中的参数未设置。

假设您只需要传递没有名称的参数，就像函数调用一样。

在 HTML 中

<script src="abc.js" data-args="a,b"></script>

然后，在 JavaScript 中

const args=document.currentScript.dataset.args.split(',');

现在 args 包含数组 [‘a’,’b’]，假设同步脚本调用。

S3C_MM

# 2022年1月3日

const urlParams = (param = null) => {
    const params = Object.fromEntries(
        (new URLSearchParams(window.location.search)).entries()
    )
    if (param !== null)
        return params[param] ?? null
    return params
}

用法

URL = https://css-tricks.cn/snippets/javascript/get-url-variables/?a=b&c=&d

urlParams() // {a: ‘b’, c: ”, d: ”}
urlParams(‘a’) // ‘b’
urlParams(‘b’) // null
urlParams(‘c’) // ”
urlParams(‘d’) // ”

S3C_MM

# 2022年1月3日

const urlParams = (param = null) => {
    const params = new URLSearchParams(window.location.search)
    return param !== null
        ? params.get(param)
        : Object.fromEntries(params.entries())
}

仔细考虑了一下，发现这在实现相同结果的同时更加简洁。

用法

评论

发表回复 取消回复

发表回复取消回复