获取转义的URL参数


302

我正在寻找一个可以获取URL参数并支持此搜索字符串而不输出JavaScript错误的jQuery插件:“格式错误的URI序列”。如果没有支持此功能的jQuery插件,我需要知道如何对其进行修改以支持此功能。

?search=%E6%F8%E5

解码时,URL参数的值应为:

æøå

(字符是挪威语)。

我无权访问服务器,因此无法对其进行任何修改。



1
之所以得到“格式错误的URI序列”,是因为大多数功能都使用decodeURIComponent()。挪威语字符最有可能使用类似的编码escape(),并将decodeURIComponent()调用更改为unescape()应该会有所帮助。
凯文M

见我对现代解决方案的回答:stackoverflow.com/a/19992436/64949
Sindre Sorhus,2013年

Answers:


417
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

33
有了name = 'bar',我觉得这个正则表达式会匹配'foobar=10'和收益'10'。也许您可以'[?|&]'在正则表达式的开头添加。干杯!
塞巴斯蒂安RoccaSerra

34
当未定义参数时,此函数返回'null'而不是null ... js的喜悦...
Damien

12
您可能希望使用“ decodeURIComponent()”而不是“ decodeURI()”,尤其是当您将诸如返回URL之类的有趣数据作为URL参数传递时
完美主义者

25
这样做很好,但是解码URIComponent更好,例如,我在参数中有一个hashtag(%23),它将被decodeURI忽略。而且我不会返回null,而是返回“”,因为这是一个怪异的返回值,当encodeURI(null)===“ null”时,“”更好;您可以执行if(!getURLParameter(“ param”))而不是if(getURLParameter(“ param”)===“ null”)。因此,我的改进版本是:解码URIComponent((RegExp(name +'='+'(。+?)(&| $)')。exec(location.search)|| [,“”])[1])
standup75年

3
否决,因为无论结果是否找到,以及您将其放置为替代数组(例如,[,null])的结果如何,它都将返回字符串,因为结果被包裹在将所有内容转换为字符串的decodeURI中,Sanjeev是正确的,但他的代码正确没有正确测试,简单的复制和粘贴无效。function getURLParameter(name) { var p = RegExp(name + '=' + '(.+?)(&|$)').exec(location.search); if(!!p) { p = decodeURI(p[1]); } return p; }
Lukasz'Severiaan'Grela 2013年

295

以下是我根据此处的注释创建的内容,以及修复了未提及的错误(例如实际返回null而不是'null')的错误:

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

6
如何new在RegExp前面添加?更少的棉绒警告。
ripper234'4

18
这应该是公认的答案。返回真正的null而不是“ null”会更好。
艺术

11
如果有人需要将其转换为coffeescript:getURLParameter:(name)-> return encodeURIComponent((new RegExp(“ [?|&]#{name} =([^&;] +?)(&| ## |; | $)“)。exec(location.search)|| [null,”“])[1] .replace(/ \ + / g,'%20'))|| null;
Redbeard 2012年

1
@Redbeard-您的函数应该在方法定义之后使用'='符号而不是双冒号吗?
Zippie 2013年

1
这是唯一适用于UTF8字符串的get-URL-parameter函数的版本。
certainlyakey

107

您真正想要的是jQuery URL Parser插件。使用此插件,获取特定URL参数(对于当前URL)的值如下所示:

$.url().param('foo');

如果要使用参数名称作为键而参数值作为值的对象,则只需param()不带参数的调用,如下所示:

$.url().param();

该库还可以与其他网址一起使用,而不仅仅是当前网址:

$.url('http://allmarkedup.com?sky=blue&grass=green').param();
$('#myElement').url().param(); // works with elements that have 'src', 'href' or 'action' attributes

由于这是一个完整的URL解析库,因此您还可以从URL获取其他信息,例如指定的端口或路径,协议等:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value');
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

它还具有其他功能,请查看其主页以获取更多文档和示例。

而不是写你自己的URI解析器为这一特定目的的还挺作品在大多数情况下,使用一个实际的URI解析器。根据答案的不同,其他答案中的代码可以返回'null'而不是null,不适用于空参数(?foo=&bar=x),无法一次解析并返回所有参数,如果您反复查询URL中的参数等,则重复该工作。

使用实际的URI解析器,不要自己动手。

对于那些讨厌jQuery的人,有一个纯JS的插件版本


23
问题是“使用jQuery获取URL参数”。我的回答回答了这个问题。其他答案指示用户基本上针对此特定用例编写自己的URI解析器,这是一个糟糕的主意。人们认为,解析URI更复杂。
卢卡斯2012年

2
这是我一直在寻找的答案,非常类似于jQuery,与其他一些答案不同。
Ehtesh Choudhury

插件会处理URI编码还是我必须手动对其进行解码?
罗伯托·利纳雷斯

这个问题说的是“ javascript”(我认为它直接表示DOM)或jQuery。所以其他任何人都会做。
brunoais

43

如果您不知道URL参数是什么,并且想获取带有参数中的键和值的对象,则可以使用以下命令:

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

用url调用getParameters()/posts?date=9/10/11&author=nilbus将返回:

{
  date:   '9/10/11',
  author: 'nilbus'
}

我不会在这里包含代码,因为它离问题还很远,但是weareon.net发布了一个库,该库也允许操纵URL中的参数:


1
是的,这样最好获取所有参数。此处列出的所有其他解决方案为每个参数重复正则表达式。
伯纳德'02

该函数返回一个笨拙的对象:{"": undefined}URL缺少参数时。最好if(searchString=='') return {};searchString分配后直接使用返回一个空对象。
乔丹·阿塞诺

40

您可以使用浏览器的本机location.search属性:

function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      i, val, params = searchString.split("&");

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

但是有些jQuery插件可以帮助您:


4
这比所有那些正则表达式单行代码更干净,更易读(并且可能更没有错误)。
Timmmm 2012年

8
我建议使用解码
URIComponent

+1可以用于现代浏览器,但有些开发人员需要使用...:| IE8:S。
brunoais

25

根据999的答案

function getURLParameter(name) {
    return decodeURIComponent(
        (location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]
    );  
}

变化:

  • decodeURI() 被替换为 decodeURIComponent()
  • [?|&] 在正则表达式的开头添加

3
如果您可以解释为什么进行这些更改,则可能对其他人有所帮助。Thx
Timm

3
不处理空参数:?a=&b=1。更好的正则表达式将是:"[?&]"+name+"=([^&]*)"
serg

6

需要添加i参数以使其不区分大小写:

  function getURLParameter(name) {
    return decodeURIComponent(
      (RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
    );
  }

3

阅读完所有答案后,我得到了这个版本的+第二个函数,将参数用作标志

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)','i').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function isSetURLParameter(name) {
    return (new RegExp('[?|&]' + name + '(?:[=|&|#|;|]|$)','i').exec(location.search) !== null)
}

2
好的答案,但是只有一个警告。对于JSHint,[,“”]可能会导致较旧的浏览器出现问题。因此,请改用[null,“”]或[undefined,“”]。我们中仍有一些不高兴的人支持IE8,但我敢说它是IE7。
Delicia Brummitt 2013年

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

$.urlParam("key");

2

例如,一个返回任何参数变量值的函数。

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

假设网址是,这就是使用该功能的方式,

“ http://example.com/?technology=jquery&blog=jquerybyexample”。

var tech = GetURLParameter('technology');
var blog = GetURLParameter('blog');

因此,在上面的代码中,变量“ tech”的值将为“ jQuery”,而“ blog”变量的值为“ jquerybyexample”。


2

您不应该使用jQuery这样的东西!
现代的方式是通过像Bower这样的包管理器使用小型可重复使用的模块。

我创建了一个微型模块,可以将查询字符串解析为一个对象。像这样使用它:

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå

如果您说拥有框架不是现代的话,那很好。但是我认为框架确实有其地位。jQuery对我来说看起来越来越不漂亮。
罗德韦克

0

这里有很多错误代码,正则表达式解决方案非常慢。我发现了一个比正则表达式快20倍的解决方案,而且非常简单:

    /*
    *   @param      string      parameter to return the value of.
    *   @return     string      value of chosen parameter, if found.
    */
    function get_param(return_this)
    {
        return_this = return_this.replace(/\?/ig, "").replace(/=/ig, ""); // Globally replace illegal chars.

        var url = window.location.href;                                   // Get the URL.
        var parameters = url.substring(url.indexOf("?") + 1).split("&");  // Split by "param=value".
        var params = [];                                                  // Array to store individual values.

        for(var i = 0; i < parameters.length; i++)
            if(parameters[i].search(return_this + "=") != -1)
                return parameters[i].substring(parameters[i].indexOf("=") + 1).split("+");

        return "Parameter not found";
    }

console.log(get_param("parameterName"));

正则表达式不是万能的解决方案,对于这种类型的问题,简单的字符串操作可以更有效地工作。代码源


0
<script type="text/javascript">
function getURLParameter(name) {
        return decodeURIComponent(
            (location.search.toLowerCase().match(RegExp("[?|&]" + name + '=(.+?)(&|$)')) || [, null])[1]
        );
    }

</script>

getURLParameter(id)getURLParameter(Id)工作原理相同:)


0

jQuery代码片段获取作为参数存储在url中的动态变量,并将它们存储为可与脚本一起使用的JavaScript变量:

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

example.com?param1=name&param2=&id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

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

console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast

-1
function getURLParameters(paramName) 
{
        var sURL = window.document.URL.toString();  
    if (sURL.indexOf("?") > 0)
    {
       var arrParams = sURL.split("?");         
       var arrURLParams = arrParams[1].split("&");      
       var arrParamNames = new Array(arrURLParams.length);
       var arrParamValues = new Array(arrURLParams.length);     
       var i = 0;
       for (i=0;i<arrURLParams.length;i++)
       {
        var sParam =  arrURLParams[i].split("=");
        arrParamNames[i] = sParam[0];
        if (sParam[1] != "")
            arrParamValues[i] = unescape(sParam[1]);
        else
            arrParamValues[i] = "No Value";
       }

       for (i=0;i<arrURLParams.length;i++)
       {
                if(arrParamNames[i] == paramName){
            //alert("Param:"+arrParamValues[i]);
                return arrParamValues[i];
             }
       }
       return "No Parameters Found";
    }

}

-1

我创建了一个简单的函数来从URL中获取JavaScript中的URL参数,如下所示:

.....58e/web/viewer.html?page=*17*&getinfo=33


function buildLinkb(param) {
    var val = document.URL;
    var url = val.substr(val.indexOf(param))  
    var n=parseInt(url.replace(param+"=",""));
    alert(n+1); 
}
buildLinkb("page");

输出: 18


2
在发布复制和粘贴多个问题的样板/惯用答案时要小心,这些问题通常会被社区标记为“垃圾邮件”。如果您这样做,通常意味着问题是重复的,因此应将其标记为:stackoverflow.com/a/11808489/419
Kev 2012年

-1

万一你们有像localhost / index.xsp?a = 1#something这样的网址,并且您需要获取参数而不是哈希值。

var vars = [], hash, anchor;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
        anchor = hash[1].split('#');
        vars.push(anchor[0]);
        vars[hash[0]] = anchor[0];
    }
}

-1

@pauloppenheim对答案的修改很小,因为它不能正确处理可能是其他参数名称一部分的参数名称。

例如:如果您具有“ appenv”和“ env”参数,则重新设置“ env”的值可以获取“ appenv”的值。

固定:

var urlParamVal = function (name) {
    var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
    return result ? decodeURIComponent(result[2]) : "";
};

-2

这可能会有所帮助。

<script type="text/javascript">
    $(document).ready(function(){
        alert(getParameterByName("third"));
    });
    function getParameterByName(name){
        var url     = document.URL,
            count   = url.indexOf(name);
            sub     = url.substring(count);
            amper   = sub.indexOf("&"); 

        if(amper == "-1"){
            var param = sub.split("=");
            return param[1];
        }else{
            var param = sub.substr(0,amper).split("=");
            return param[1];
        }

    }
</script>

1
此代码未通过正确测试。猜猜查询将如何处理?twothrids=text
Lyth 2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.