Fatal编程技术网
  • jquery/
  • 如何使用jQuery或普通JavaScript获取URL参数？

如何使用jQuery或普通JavaScript获取URL参数？

jquery url parameters

如何使用jQuery或普通JavaScript获取URL参数？,jquery,url,parameters,query-string,querystringparameter,Jquery,Url,Parameters,Query String,Querystringparameter,我见过很多jQuery示例，其中参数大小和名称未知 我的URL只有一个字符串： http://example.com?sent=yes 我只想检测： 是否存在发送？ 它等于是吗？ 试试这个工作演示 API: 伊纳雷： 这将有助于： 代码 我希望这会有所帮助 <script type="text/javascript"> function getParameters() { var searchString = window.location.search.subs

我见过很多jQuery示例，其中参数大小和名称未知

我的URL只有一个字符串：

http://example.com?sent=yes
我只想检测：

是否存在发送？ 它等于是吗？ 试试这个工作演示

API:

伊纳雷： 这将有助于：

代码

我希望这会有所帮助

 <script type="text/javascript">
   function getParameters() {
     var searchString = window.location.search.substring(1),
       params = searchString.split("&"),
       hash = {};

     if (searchString == "") return {};
     for (var i = 0; i < params.length; i++) {
       var val = params[i].split("=");
       hash[unescape(val[0])] = unescape(val[1]);
     }

     return hash;
   }

    $(window).load(function() {
      var param = getParameters();
      if (typeof param.sent !== "undefined") {
        // Do something.
      }
    });
</script>
最佳解决方案

jQuery代码片段，以获取存储在url中的动态变量作为参数，并将其存储为JavaScript变量，以便与脚本一起使用：

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null) {
       return null;
    }
    return decodeURI(results[1]) || 0;
}
example.com？param1=name¶m2=&id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null
带空格的参数示例

http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast



console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast
这将为您提供一个很好的工作对象

    function queryParameters () {
        var result = {};

        var params = window.location.search.split(/\?|\&/);

        params.forEach( function(it) {
            if (it) {
                var param = it.split("=");
                result[param[0]] = param[1];
            }
        });

        return result;
    }
然后,

    if (queryParameters().sent === 'yes') { .....
也许你想看看？免责声明：代码是我写的

代码：

使用JS，您基本上可以对所有字符串（例如document.URL.extract）调用extract函数，然后返回找到的所有参数的HashMap。它还可以自定义以处理分隔符和所有

缩小版<1kb

我总是把它作为一行。现在params有了变量：

params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})
多行：

var params={};
window.location.search
  .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
    params[key] = value;
  }
);
作为一项功能

function getSearchParams(k){
 var p={};
 location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
 return k?p[k]:p;
}
您可以将其用作：

getSearchParams()  //returns {key1:val1, key2:val2}
或

Sameer答案的咖啡脚本版本

getUrlParameter = (sParam) ->
  sPageURL = window.location.search.substring(1)
  sURLVariables = sPageURL.split('&')
  i = 0
  while i < sURLVariables.length
    sParameterName = sURLVariables[i].split('=')
    if sParameterName[0] == sParam
      return sParameterName[1]
    i++
这里有一个很棒的图书馆：

这样你就可以简单地

url = 'http://example.com?sent=yes';
sent = $.url(url).param('sent');
if (typeof sent != 'undefined') { // sent exists
   if (sent == 'yes') { // sent is equal to yes
     // ...
   }
}
本例假设您正在使用jQuery。你也可以像使用普通javascript一样使用它，语法会有点不同。

可能太晚了。但是这种方法非常简单

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990 -->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')      // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')       // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});
更新 需要url插件： 谢谢-Ripounet使用这个

$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
对Sameer的回答稍有改进，将参数缓存到闭包中，以避免每次调用时解析和循环所有参数

var getURLParam = (function() {
    var paramStr = decodeURIComponent(window.location.search).substring(1);
    var paramSegs = paramStr.split('&');
    var params = [];
    for(var i = 0; i < paramSegs.length; i++) {
        var paramSeg = paramSegs[i].split('=');
        params[paramSeg[0]] = paramSeg[1];
    }
    console.log(params);
    return function(key) {
        return params[key];
    }
})();
或者您可以使用这个简洁的小函数，因为为什么解决方案过于复杂

简化和单列化后，哪一项看起来更好：

tl；dr单线解决方案
这可能有些过分，但现在有一个非常流行的库可用于解析URI，名为

实例 变量uri=http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow; var components=URI.parseuri； var query=URI.parseQuerycomponents['query']； document.getElementByIdresult.innerHTML=URI=+URI； document.getElementByIdresult.innerHTML+=technology=+query['technology']； //如果您查看控制台，您将看到这个库为多值查询生成了一个JS数组！ logquery['technology']； logquery['blog']； 我用这个，它很管用。

使用vanilla JavaScript，您可以轻松地获取params location.search，获取子字符串而不使用？并将其拆分为一个数组

在遍历urlparms时，可以使用“=”再次拆分字符串，并将其作为object[elment[0]]=element[1]添加到“params”对象中。超级简单，易于访问

如果URL参数中有&filename=p&g.html&uid=66，该怎么办

在这种情况下，第一个功能将无法正常工作。所以我修改了代码

function getUrlParameter(sParam) {
    var sURLVariables = window.location.search.substring(1).split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
}
这是基于的答案，但URL对参数进行解码，以便在参数包含数字和字母以外的数据时可以使用：

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    // Need to decode the URL parameters, including putting in a fix for the plus sign
    // https://stackoverflow.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}
诚然，我是在回答一个回答过多的问题，但这有以下优点：

-不依赖于任何外部库，包括jQuery

-通过扩展“字符串”，不会污染全局函数命名空间

-在找到匹配项后，不创建任何全局数据并进行不必要的处理

-处理编码问题，并接受非编码参数名称

-避免显式for循环

然后，您可以将其用作：

var paramVal = "paramName".urlParamValue() // null if no match
这么简单，您可以使用任何url并获取值

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
用法示例

注意：如果一个参数出现多次？first=value1&second=value2，您将得到第一个值value1和第二个值value2。

另一个替代函数

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}
还有一个使用库的例子

示例完全按照要求回答问题

var url='1〕http://example.com?sent=yes'; var urlParams=new URIurl.searchtrue； // 1. 是否存在发送？ var sendExists=urlParams.sent！==未定义； // 2. 它等于是吗？ var sendIsEqualtToYes=urlParams.sent=='yes'； //输出结果为可读形式 //不需要生产 如果存在发送{ console.log'Url已发送参数，其值为'+urlparms.sent+''； 如果urlParams.sent==“是”{ console.log'Sent param等于yes'； }否则{ console.log'Sent param不等于yes'； } }否则{ 日志“Url尚未发送参数”； }
这个很简单，对我来说很有用

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}
所以如果你的url是

试试这个

console.log($.urlParam('city'));
2021年的解决方案

我们有：

是否存在发送

它等于是吗

然后比较一下。

函数getRequestParam { var-res=null； 试一试{ var qs=decodeURIComponentwindow.location.search.substring1；//在“？”i之后获取所有内容 n URI var ar=qs.拆分'&'； $.eachar，functiona，b{ var kv=b.分裂“=”； ifparam==千伏[0]{ res=千伏[1]； 返回false；//中断循环 } }; }catch{} 返回res；
} 另一个解决方案使用jQuery和JSON，因此您可以通过对象访问参数值

var loc = window.location.href;
var param = {};
if(loc.indexOf('?') > -1)
{
    var params = loc.substr(loc.indexOf('?')+1, loc.length).split("&");

    var stringJson = "{";
    for(var i=0;i<params.length;i++)
    {
        var propVal = params[i].split("=");
        var paramName = propVal[0];
        var value = propVal[1];
        stringJson += "\""+paramName+"\": \""+value+"\"";
        if(i != params.length-1) stringJson += ",";
    }
    stringJson += "}";
    // parse string with jQuery parseJSON
    param = $.parseJSON(stringJson);
}
归来

en
最有用的用法是在页面加载时运行它，并使用全局变量在您可能需要的任何地方使用参数

如果参数包含数值，则只需解析该值

parseInt(param.page)
如果没有参数，param将只是一个空对象。

如果要从特定url查找特定参数：

function findParam(url, param){
  var check = "" + param;
  if(url.search(check )>=0){
      return url.substring(url.search(check )).split('&')[0].split('=')[1];
  }
}  

var url = "http://www.yourdomain.com/example?id=1&order_no=114&invoice_no=254";  
alert(findParam(url,"order_no"));
使用URLSearchParams：

注意兼容性大多数情况下是可以的，但IE和Edge可能不同，请检查此以获取兼容参考：

最佳解决方案

使用上述函数，您可以获得单个参数值：

getUrlParameter('sent');
可能是我见过的最好的解决方案的复制品[here][1][1]：现在有一个插件/库，名为URI.js：谢谢！但是当复制这个时，我发现了一个令人讨厌的惊喜，在结尾处有一个零宽度的空白\u200b。使脚本有一个不可见的语法错误。为空搜索返回false或null此解决方案对我很有效我刚刚使用了var sPageURL=decodeURIwindow.location.search.substring1；若要将%20个字符转换为空格，并且如果参数不匹配，我将返回一个空字符串，而不是空字符串。我已更新了答案，以包含此注释上方的所有注释代码更改。应按照Iouri建议对参数值进行解码。如果对url进行解码，如答案所示，则如果参数值中存在编码的&or=，则解码将无法正常工作。仅对单个变量有效-该&will off会将其丢弃-可能使用regex扩展&错误编码为&；在上面的答案中，参考正确答案，这个库不再维护，但是我使用它，它很棒。确保您使用param not attr来获取这些查询字符串参数，正如作者在示例中所介绍的那样。修改搜索字符串的丑陋黑客。。。但不需要外部模块或jquery。我喜欢它。@Bryce它实际上并不修改搜索字符串。.replace实际上返回一个新字符串，这些返回的字符串将被处理到params对象中。Nice、short和公认的解决方案相反，不需要在每次需要值时重新分析url。可以使用replace/[？&；]+[^=]+=[^&；]*/gi重新确认；字符也可以作为分隔符。清晰、无痛苦的一行代码，比我接受的答案更好，没有额外的libs。如果使用哈希而不是GET查询分隔符问号，则会使用此选项：var params={}；replace/[&]+[^=&]+=[^&]*/gi，functionstr，key，value{params[key]=value；}；这对于AJAX之类的应用非常有用，在AJAX中，窗口中的散列会被AJAX请求更新，但用户也可以转到包含散列的uri。注意：如果有特殊字符作为参数或Umlaute等，则需要解码。因此，不要返回结果[1]| | 0；它应该是返回结果[1]| | 0；好奇的是，既然已经有了对结果的检查，为什么它需要| | 0部分，它不总是会返回匹配数组吗？@AirWick219是一个合适的故障保护。虽然多余，但谨慎是无妨的。最有可能的是，原始来源：但这个答案添加了一些新的想法。不确定使用jQuery是否值得。字符串拆分也可能比正则表达式更快。这并不是一个考虑url只能解析一次的因素。这是第一个在不同浏览器中都能完美工作的解决方案-谢谢@Nickythe扳手听到这个很高兴，谢谢！无论如何，请注意，这是一个非常简单的解决方案，如果您得到包含特殊字符的复杂url参数，最好检查提供的链接。@Qwerty-yup-我的用例非常简单，参数总是相同的，等等，基本上正是OP要求的，再次感谢@BernardVanderBeken有趣的是，我修复了它，不管怎样，这是一个相当愚蠢的解决方案，底部支持编码字符和数组的解决方案要好得多。决定这个的人应该首先检查repo。用法已更改。$。attr'message'变成$.urlquery，它只提供完整的查询！为了只获得一个参数，我必须：$.urlquery.split=[1]我认为这在不同的浏览器中是不受支持的，那么为什么要使用它呢？参考-目前在IE/Edge中不工作，功能检测也不工作：如果窗口{//浏览器中的“URLSearchParams”支持URLSearchParams}对我和我的目标受众来说足够好@p_champ Edge于2018年4月17日获得支持。让IE去死吧。这是现代问题的现代解决方案。名称必须是字符串。工作得很有魅力~这是我最喜欢的+1值得注意的是，这是一种以搜索类型结尾的搜索。例如，我
如果您传入Phone作为名称，并且还有一个名为HomePhone的字段，那么如果该字段位于url的第一位，它可能会返回错误的值。这是错误的！例如，在OP示例中，param't'==param'sent'==yes。这里有一个修复方法：return location.search.splitnew RegExp'[？&]'+name+'='[1]| |.split'&'[0]；还要注意的是，您无法判断参数是否存在，因为缺少参数会得到空字符串。非常简单和优雅。像做梦一样工作。谢谢//强制完整密钥存在，而不仅仅是密钥返回位置的最后一部分。search.split'？'+name+'='[1]| | location.search.split'&'+name+'='[1]| | split'&'[0]；拆分/\？\&/这意味着正确的答案！并非大多数浏览器都可以使用此选项。URLSearchParams将特殊字符+替换为空格。因此，如果您的url参数中有一个+，它将被替换。 
function getUrlParameter(sParam) {
    var sURLVariables = window.location.search.substring(1).split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
}

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    // Need to decode the URL parameters, including putting in a fix for the plus sign
    // https://stackoverflow.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}

String.prototype.urlParamValue = function() {
    var desiredVal = null;
    var paramName = this.valueOf();
    window.location.search.substring(1).split('&').some(function(currentValue, _, _) {
        var nameVal = currentValue.split('=');
        if ( decodeURIComponent(nameVal[0]) === paramName ) {
            desiredVal = decodeURIComponent(nameVal[1]);
            return true;
        }
        return false;
    });
    return desiredVal;
};

var paramVal = "paramName".urlParamValue() // null if no match

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// query string: ?first=value1&second=&value2
var foo = getParameterByName('first'); // "value1"
var bar = getParameterByName('second'); // "value2" 

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

console.log($.urlParam('city'));

let searchParams = new URLSearchParams(window.location.search)

searchParams.has('sent') // true

let param = searchParams.get('sent')

var loc = window.location.href;
var param = {};
if(loc.indexOf('?') > -1)
{
    var params = loc.substr(loc.indexOf('?')+1, loc.length).split("&");

    var stringJson = "{";
    for(var i=0;i<params.length;i++)
    {
        var propVal = params[i].split("=");
        var paramName = propVal[0];
        var value = propVal[1];
        stringJson += "\""+paramName+"\": \""+value+"\"";
        if(i != params.length-1) stringJson += ",";
    }
    stringJson += "}";
    // parse string with jQuery parseJSON
    param = $.parseJSON(stringJson);
}

param.language

en

parseInt(param.page)

function findParam(url, param){
  var check = "" + param;
  if(url.search(check )>=0){
      return url.substring(url.search(check )).split('&')[0].split('=')[1];
  }
}  

var url = "http://www.yourdomain.com/example?id=1&order_no=114&invoice_no=254";  
alert(findParam(url,"order_no"));

var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));

http://example.com?sent=yes

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.href);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
};

getUrlParameter('sent');