在 JavaScript 中使用 URL 的 GET 参数 [重复]

Posted 2023-03-10

【中文标题】在 JavaScript 中使用 URL 的 GET 参数 [重复]

【英文标题】：Using the GET parameter of a URL in JavaScript [duplicate]

【发布时间】：2010-10-24 01:33:05

【问题描述】：

如果我在诸如

之类的页面上

http://somesite.com/somepage.php?param1=asdf

在该页面的 javascript 中，我想为 URL 的 GET 部分中的参数值设置一个变量。

所以在 JavaScript 中：

<script>
   param1var = ...   // ... would be replaced with the code to get asdf from URI
</script>

“……”是什么意思？

【问题讨论】：

链接问题中有更好的答案。

在没有正则表达式的情况下在这里检查最佳答案 ***.com/questions/19491336/get-url-parameter-jquery/... – Sameer Kazi

这是一个简单的解决方案：mycodingtricks.com/snippets/javascript/…

【参考方案1】：

编辑：不要这样做 我决定把这个留在这里作为你不应该做的一个例子

实际上，您不需要做任何特别的事情。您可以将 JavaScript 和 PHP 混合在一起，将 PHP 中的变量直接导入 JavaScript。

var param1val = '<?php echo $_GET['param1'] ?>';

【讨论】：

这就是 XSS 攻击的发生方式

@MeatPopsicle 是的，我想我在 7 年前有点天真 ;-) 如果你可以否决它，我可以将答案作为 不 做什么的例子

【参考方案2】：

我做了这个 gnarf 解决方案的变体，所以调用和结果类似于 PHP：

function S_GET(id)
    var a = new RegExp(id+"=([^&#=]*)");
    return decodeURIComponent(a.exec(window.location.search)[1]);

但由于在函数中调用会减慢进程，因此最好将其用作全局：

window['var_name'] = decodeURIComponent( /var_in_get=([^&#=]*)/.exec(window.location.search)[1] );

更新

由于我还在学习 JS，所以我在更多的 JS 行为中创建了一个更好的答案：

Url = 
    get get()
        var vars= ;
        if(window.location.search.length!==0)
            window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value)
                key=decodeURIComponent(key);
                if(typeof vars[key]==="undefined") vars[key]= decodeURIComponent(value);
                else vars[key]= [].concat(vars[key], decodeURIComponent(value));
            );
        return vars;
    
;

这允许仅使用Url.get 调用。

示例 网址?param1=param1Value&param2=param2Value 可以这样称呼：

Url.get.param1 //"param1Value"
Url.get.param2 //"param2Value"

这是一个片段：

// URL GET params
url = "?a=2&a=3&b=2&a=4";

Url = 
    get get()
        var vars= ;
        if(url.length!==0)
            url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value)
                key=decodeURIComponent(key);
                if(typeof vars[key]==="undefined") vars[key]= decodeURIComponent(value);
                else vars[key]= [].concat(vars[key], decodeURIComponent(value));
            );
        return vars;
    
;

document.querySelector('log').innerhtml = JSON.stringify(Url.get);

<log></log>

【讨论】：

+1 与我的版本相似（不使用临时变量并对参数值进行编码）以及在幽默不恰当的上下文中的有趣性能提示。

【参考方案3】：

如果你已经在运行一个 php 页面，那么

php位：

    $json   =   json_encode($_REQUEST, JSON_FORCE_OBJECT);
    print "<script>var getVars = $json;</script>";

js 位：

    var param1var = getVars.param1var;

但是对于 Html 页面，Jose Basilio 的解决方案对我来说看起来不错。

祝你好运！

【参考方案4】：

你可以使用这个功能

function getParmFromUrl(url, parm) 
    var re = new RegExp(".*[?&]" + parm + "=([^&]+)(&|$)");
    var match = url.match(re);
    return(match ? match[1] : "");

【参考方案5】：

这是 JSLint 喜欢的一个版本：

/*jslint browser: true */
var GET = ;
(function (input) 
    'use strict';
    if (input.length > 1) 
        var param = input.slice(1).replace(/\+/g, ' ').split('&'),
            plength = param.length,
            tmp,
            p;

        for (p = 0; p < plength; p += 1) 
            tmp = param[p].split('=');
            GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
        
    
(window.location.search));

window.alert(JSON.stringify(GET));

或者，如果您需要支持一个键的多个值，例如。 ?key=value1&key=value2 你可以这样用：

/*jslint browser: true */
var GET = ;
(function (input) 
    'use strict';
    if (input.length > 1) 
        var params = input.slice(1).replace(/\+/g, ' ').split('&'),
            plength = params.length,
            tmp,
            key,
            val,
            obj,
            p;

        for (p = 0; p < plength; p += 1) 
            tmp = params[p].split('=');
            key = decodeURIComponent(tmp[0]);
            val = decodeURIComponent(tmp[1]);
            if (GET.hasOwnProperty(key)) 
                obj = GET[key];
                if (obj.constructor === Array) 
                    obj.push(val);
                 else 
                    GET[key] = [obj, val];
                
             else 
                GET[key] = val;
            
        
    
(window.location.search));

window.alert(JSON.stringify(GET));

【参考方案6】：

以下是您可以在 Coffee Script 中执行此操作的方法（如果有人感兴趣的话）。

decodeURIComponent( v.split( "=" )[1] ) if decodeURIComponent( v.split( "=" )[0] ) == name for v in window.location.search.substring( 1 ).split( "&" )

【参考方案7】：

您可以获取位置对象的“搜索”部分 - 然后将其解析出来。

var matches = /param1=([^&#=]*)/.exec(window.location.search);
var param1 = matches[1];

【参考方案8】：

来自我的编程档案：

function querystring(key) 
   var re=new RegExp('(?:\\?|&)'+key+'=(.*?)(?=&|$)','gi');
   var r=[], m;
   while ((m=re.exec(document.location.search)) != null) r[r.length]=m[1];
   return r;

如果该值不存在，则返回一个空数组。 如果值存在，则返回一个数组，其中包含一项，即值。 如果存在多个同名值，则返回一个包含每个值的数组。

例子：

var param1var = querystring("param1")[0];

document.write(querystring("name"));

if (querystring('id')=='42') alert('We apoligize for the inconvenience.');

if (querystring('button').length>0) alert(querystring('info'));

【参考方案9】：

这看起来不错：

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];

来自http://www.netlobo.com/url_query_string_javascript.html

【参考方案10】：

这里有一些 sample code 。

<script>
var param1var = getQueryVariable("param1");

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) 
      return pair[1];
    
   
  alert('Query Variable ' + variable + ' not found');

</script>

【讨论】：

您可能应该在返回之前在pair[1] 上调用decodeURIComponent，最好在将其与变量进行比较之前在pair[0] 上调用。

【参考方案11】：

使用 jquery？我以前用过这个：http://projects.allmarkedup.com/jquery_url_parser/，效果很好。

【讨论】：

很遗憾不是（不是我的选择）。

原链接失效，更新链接：github.com/allmarkedup/purl