首页 文章

获取url参数jquery或如何获取查询字符串值在js中

提问于
浏览
492

我已经看到很多jQuery示例,其中参数大小和名称未知 . 我的网址只有1个字符串:

http://example.com?sent=yes

我只是想检测一下:

  • sent 存在吗?

  • 它等于"yes"吗?

30 回答

  • 3

    试试这个 working demo http://jsfiddle.net/xy7cX/

    API:

    这应该有帮助 :)

    code

    var url = "http://myurl.com?sent=yes"
    
    var pieces = url.split("?");
    alert(pieces[1] + " ===== " + $.inArray("sent=yes", pieces));
    
  • 1

    又一个替代功能......

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

    最佳解决方案here .

    var getUrlParameter = function getUrlParameter(sParam) {
        var sPageURL = window.location.search.substring(1),
            sURLVariables = sPageURL.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是,
    http://dummy.com/?technology=jquery&blog=jquerybyexample .

    var tech = getUrlParameter('technology');
    var blog = getUrlParameter('blog');
    
  • 2

    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&param2=&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
    
  • 31

    来自 2018 的解决方案

    我们有:http://example.com?sent=yes

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

    发送 exist

    searchParams.has('sent') // true
    

    equal 到"yes"?

    let param = searchParams.get('sent')
    

    然后只是比较它 .

  • 2

    我总是坚持这一行 . 现在params有vars:

    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}
    

    要么

    getSearchParams("key1")  //returns val1
    
  • 2

    可能为时已晚 . 但这种方法非常简单易行

    <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"
    });
    

    UPDATE
    需要url插件:plugins.jquery.com/url
    谢谢-Ripounet

  • 5

    或者你可以使用这个整洁的小功能,因为 why overcomplicated solutions?

    function getQueryParam(param) {
        location.search.substr(1)
            .split("&")
            .some(function(item) { // returns first occurence and stops
                return item.split("=")[0] == param && (param = item.split("=")[1])
            })
        return param
    }
    

    在简化和onelined时看起来更好:

    tl;博士一线解决方案

    var queryDict = {};
    location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
    
    result:
    queryDict['sent'] // undefined or 'value'
    

    但是如果你有编码字符或多值键怎么办?

    你最好看到这个答案:How can I get query string values in JavaScript?

    潜行峰值

    "?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
    > queryDict
    a: ["1", "5", "t e x t"]
    b: ["2"]
    c: ["3"]
    d: [undefined]
    e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
    
    > queryDict["a"][1] // "5"
    > queryDict.a[1] // "5"
    
  • 0

    也许你可能想给_932007看看? (免责声明:我写了代码)

    code:

    document.URL == "http://helloworld.com/quotes?id=1337&author=kelvin&message=hello"
    var currentURL = document.URL;
    var params = currentURL.extract();
    console.log(params.id); // 1337
    console.log(params.author) // "kelvin"
    console.log(params.message) // "hello"
    

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

    缩小版<1kb

  • 2

    这个很简单,对我有用

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

    所以如果你的网址是http://www.yoursite.com?city=4

    试试这个

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

    使用 URLSearchParams

    var params = new window.URLSearchParams(window.location.search);
    console.log(params.get('name'));
    
  • 1
    function GetRequestParam(param)
    {
    	var res = null;
    	try{
    		var qs = decodeURIComponent(window.location.search.substring(1));//get everything after then '?' in URI
    		var ar = qs.split('&');
    		$.each(ar, function(a, b){
    			var kv = b.split('=');
    			if(param === kv[0]){
    				res = kv[1];
    				return false;//break loop
    			}
    		});
    	}catch(e){}
    	return res;
    }
    
  • 1

    我希望这将有所帮助 .

    <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>
    
  • 4

    这是一个很棒的图书馆:https://github.com/allmarkedup/purl

    这让你做得很简单

    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一样使用它,语法会有所不同 .

  • -1

    这可能有些过分,但现在有一个非常流行的库可用于解析URI,称为URI.js .

    示例

    var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow";
    var components = URI.parse(uri);
    var query = URI.parseQuery(components['query']);
    document.getElementById("result").innerHTML = "URI = " + uri;
    document.getElementById("result").innerHTML += "<br>technology = " + query['technology'];
    
    // If you look in your console, you will see that this library generates a JS array for multi-valued queries!
    console.log(query['technology']);
    console.log(query['blog']);
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.min.js"></script>
    
    <span id="result"></span>
    
  • 1

    如此简单,你可以使用任何网址并获得 Value

    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, " "));
    }
    

    Usage Example

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

    注意:如果参数多次出现(?first = value1&second = value2),您将获得第一个值(value1),第二个值为(value2) .

  • 10

    这将为您提供一个很好的对象

    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') { .....
    
  • 40

    这基于Gazoris的答案,但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;
    }
    
  • 167

    使用URI.js库还有另一个例子 .

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

    var url = 'http://example.com?sent=yes';
    var urlParams = new URI(url).search(true);
    // 1. Does sent exist?
    var sendExists = urlParams.sent !== undefined;
    // 2. Is it equal to "yes"?
    var sendIsEqualtToYes = urlParams.sent == 'yes';
    
    // output results in readable form
    // not required for production
    if (sendExists) {
      console.log('Url has "sent" param, its value is "' + urlParams.sent + '"');
      if (urlParams.sent == 'yes') {
        console.log('"Sent" param is equal to "yes"');
      } else {
        console.log('"Sent" param is not equal to "yes"');
      }
    } else {
      console.log('Url hasn\'t "sent" param');
    }
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js"></script>
    
  • 1008

    Samefe的Coffeescript版本的答案

    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++
    
  • 6

    对Sameer的回答略有改进,将params缓存到闭包中以避免每次调用时解析和循环遍历所有参数

    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];
        }
    })();
    
  • 1

    我使用它,它的工作原理 . http://codesheet.org/codesheet/NF246Tzs

    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
        });
    return vars;
    }
    
    
    var first = getUrlVars()["id"];
    
  • 1

    使用vanilla JavaScript,您可以轻松地使用params(location.search),获取子字符串(不带?)并将其转换为数组,方法是将其拆分为“&” .

    当您遍历urlParams时,您可以再次使用'='拆分字符串,并将其作为对象[elmement [0]] = element [1]添加到'params'对象中 . 超级简单,易于访问 .

    http://www.website.com/?error=userError&type=handwritten

    var urlParams = location.search.substring(1).split('&'),
                    params = {};
    
                urlParams.forEach(function(el){
                    var tmpArr = el.split('=');
                    params[tmpArr[0]] = tmpArr[1];
                });
    
    
                var error = params['error'];
                var type = params['type'];
    
  • -1

    如果在&filename参数中有&,如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]);
            }
        }
    }
    
  • 3

    不可否认,我正在为一个过度回答的问题添加我的答案,但这有以下优点:

    • 不依赖于任何外部库,包括jQuery

    • 通过扩展'String'不污染全局函数名称空间

    • 未创建任何全局数据并在找到匹配后执行不必要的处理

    • 处理编码问题,并接受(假设)非编码参数名称

    • 避免显式的 for 循环

    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
    
  • 10

    如果要从特定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"));
    
  • 1
    http://example.com?sent=yes
    

    最佳解决方案here .

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

    使用上述功能,您可以获得单个参数值:

    getUrlParameter('sent');
    
  • 3

    另一种使用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);
    }
    

    假设您的网址是 http://example.com/?search=hello+world&language=en&page=3

    后这只是使用这样的参数的问题:

    param.language
    

    回来

    en
    

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

    如果您的参数包含数值,则只需解析该值 .

    parseInt(param.page)
    

    如果没有参数, param 将只是一个空对象 .

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

    用这个

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

相关问题