获取转义的 URL 参数

Posted 2023-02-22

技术标签:

【中文标题】获取转义的 URL 参数【英文标题】：Get escaped URL parameter 【发布时间】：2010-11-27 02:17:17 【问题描述】：

我正在寻找一个 jQuery 插件，它可以获取 URL 参数，并支持此搜索字符串而不会输出 javascript 错误：“格式错误的 URI 序列”。如果没有支持这个的jQuery插件，我需要知道如何修改它来支持这个。

?search=%E6%F8%E5

URL参数的值，解码后应该是：

æøå

（字符是挪威语）。

我没有访问服务器的权限，所以我不能修改它上面的任何东西。

【问题讨论】：

看看***.com/questions/901115/get-querystring-with-jquery/… 您得到“格式错误的 URI 序列”的原因是因为大多数函数使用 decodeURIComponent()。挪威语字符很可能是使用 escape() 之类的东西编码的，将 decodeURIComponent() 调用更改为 unescape() 应该会有所帮助。查看我的现代解决方案答案：***.com/a/19992436/64949 【参考方案1】：

jQuery 代码 sn-p 获取存储在 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

【讨论】：

【参考方案2】：

你不应该在这样的事情上使用 jQuery！ 现代方法是通过像 Bower 这样的包管理器使用小型可重用模块。

我创建了一个很小的module，它可以将查询字符串解析为一个对象。像这样使用它：

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

【讨论】：

如果你说拥有一个框架并不现代，那很好。但在我看来，框架确实有它们的位置。 jQuery 在我看来越来越不漂亮了。【参考方案3】：

如果您不知道 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;

使用/posts?date=9/10/11&author=nilbus 之类的 url 调用 getParameters() 将返回：


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

我不会在此处包含代码，因为它离问题更远，但是 weareon.net 发布了一个库，它也允许在 URL 中操作参数：

博文：http://blog.weareon.net/working-with-url-parameters-in-javascript/ 代码：http://pastebin.ubuntu.com/1163515/

【讨论】：

是的，这样最好获取所有参数。此处列出的所有其他解决方案都为每个参数重复正则表达式。这个函数返回一个尴尬的对象："": undefined 当 URL 没有参数时。最好在 searchString 赋值后直接使用 if(searchString=='') return ; 返回一个空对象。【参考方案4】：

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

</script>

getURLParameter(id) 或 getURLParameter(Id) 工作方式相同：)

【讨论】：

【参考方案5】：

@pauloppenheim 对答案稍作修改，因为它无法正确处理可能是其他参数名称一部分的参数名称。

例如：如果您有“appenv”和“env”参数，则重新定义“env”的值可以获取“appenv”值。

修复：

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

【讨论】：

【参考方案6】：

这里有很多错误代码，正则表达式解决方案非常慢。我找到了一个解决方案，它的运行速度比正则表达式快 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"));

正则表达式不是万能的解决方案，对于这类问题，简单的字符串操作可以更有效地处理大量工作。 Code source.

【讨论】：

【参考方案7】：

在阅读完所有答案后，我最终得到了这个版本，它带有第二个函数来使用参数作为标志

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)

【讨论】：

很好的答案，但是只有一个警告。根据 JSHint，[,""] 可能会导致旧浏览器出现问题。因此，请改用 [null,""] 或 [undefined,""]。我们中仍然有一些不高兴的少数人支持 IE8，我敢说 IE7。【参考方案8】：

例如，返回任何参数变量值的函数。

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

假设 URL 是，这就是你如何使用这个函数，

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

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

所以在上面的代码中，变量“tech”的值是“jQuery”，而“blog”变量的值是“jquerybyexample”。

【讨论】：

【参考方案9】：

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

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

【讨论】：

【参考方案10】：

以防万一你们有 localhost/index.xsp?a=1#something 之类的 url，而您需要获取参数而不是哈希。

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

【讨论】：

【参考方案11】：

我创建了一个简单的函数来从这样的 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

【讨论】：

在发布多个问题的复制和粘贴样板/逐字答案时要小心，这些往往会被社区标记为“垃圾邮件”。如果您这样做，则通常意味着问题是重复的，因此请将它们标记为：***.com/a/11808489/419【参考方案12】：

这可能会有所帮助。

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

【讨论】：

这段代码没有经过很好的测试。猜猜查询 ?twothrids=text 会发生什么【参考方案13】：

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


$.urlParam("key");

【讨论】：

【参考方案14】：

您真正想要的是jQuery URL Parser plugin。使用此插件，获取特定 URL 参数（针对当前 URL）的值如下所示：

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

如果你想要一个以参数名作为键、参数值作为值的对象，你只需调用param()而不带参数，如下所示：

$.url().param();

这个库也适用于其他 url，而不仅仅是当前的：

$.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'

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

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

使用实际的 URI 解析器，不要自己发明。

对于那些不喜欢 jQuery 的人，有a version of the plugin that's pure JS。

【讨论】：

问题是“使用 jQuery 获取 URL 参数”。我的回答回答了这个问题。其他答案指示用户基本上为这个特定用例编写自己的 URI 解析器，这是一个糟糕的主意。解析 URI 比人们想象的要复杂。这是我一直在寻找的答案，并且非常类似于 jQuery，与其他一些答案不同。插件是处理 URI 编码还是我必须手动解码？问题是“javascript”（我认为它直接表示 DOM）或 jQuery。所以其他任何人都会这样做。【参考方案15】：

以下是我从这里的 cmets 创建的，以及修复未提及的错误（例如实际返回 null，而不是 'null'）：

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

【讨论】：

在RegExp前面加上new怎么样？更少的 lint 警告。这应该是公认的答案。获得真正的空值而不是“空值”要好得多。如果有人需要将其转换为咖啡脚本：getURLParameter: (name) -> return decodeURIComponent((new RegExp("[?|&]#name=([^&;]+?) (&|##|;|$)").exec(location.search) || [null,""] )[1].replace(/\+/g, '%20'))||null; @Redbeard - 你的函数不应该在方法定义后有一个“=”号而不是双冒号吗？这是唯一适用于我的 UTF8 字符串的 get-URL-parameter 函数版本。【参考方案16】：

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

【讨论】：

【参考方案17】：

基于999's answer：

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

变化：

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

【讨论】：

如果您能解释为什么进行这些更改，可能对其他人有所帮助。谢谢不处理空参数：?a=&b=1。更好的正则表达式是："[?&]"+name+"=([^&]*)"【参考方案18】：

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

【讨论】：

使用name = 'bar'，我认为这个正则表达式将匹配'foobar=10' 并返回'10'。也许您可以在正则表达式的开头添加'[?|&]'。干杯！这个函数在参数没有定义的时候返回'null'而不是null...js的乐趣... 您可能需要“decodeURIComponent()”而不是“decodeURI()”，尤其是当您将返回 URL 等有趣的数据作为 URL 参数传递时这很好，但 decodeURIComponent 更好，例如，我的参数中有一个标签 (%23)，它将被 decodeURI 忽略。而且我不会返回null，而是""，因为decodeURI(null) === "null"，这是一个奇怪的返回值，""更好；你可以做 if (!getURLParameter("param")) 而不是 if (getURLParameter("param") === "null")。所以，我的改进版本： decodeURIComponent( (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,""])[1] ) 投了反对票，因为无论是否找到结果，无论您将什么作为替代数组，例如 [,null]，都将返回字符串，因为结果被包装在 decodeURI 中，这会将任何内容转换为字符串，Sanjeev 是对的，但他的代码没有正确测试，简单的复制和粘贴不起作用。

function getURLParameter(name)      var p = RegExp(name + '=' + '(.+?)(&amp;|$)').exec(location.search);          if(!!p)              p = decodeURI(p[1]);          return p;

【参考方案19】：

可以使用浏览器原生的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 插件可以帮助你：

query-object getURLParam

【讨论】：

这比所有那些正则表达式单行代码更干净、更易读（并且可能更无错误）。我建议使用 decodeURIComponent() 而不是 unescape() +1 这适用于现代浏览器，但一些开发人员需要使用...：| IE8 :S.

以上是关于获取转义的 URL 参数的主要内容，如果未能解决你的问题，请参考以下文章

url的转义问题

使用@ url 语法传递给 Thymeleaf 的转义参数

JS/JSP/Java 中 URL/参数的转义

url转义

url参数+，&，=，/等转义编码