エスケープされたURLパラメータを取得する


302

URLパラメーターを取得でき、JavaScriptエラーを出力せずにこの検索文字列をサポートできるjQueryプラグインを探しています。「不正なURIシーケンス」。これをサポートするjQueryプラグインがない場合、これをサポートするように変更する方法を知る必要があります。

?search=%E6%F8%E5

URLパラメータの値は、デコードされると、次のようになります。

æøå

(文字はノルウェー語です)。

サーバーにアクセスできないため、サーバー上で何も変更できません。



1
「不正なURIシーケンス」が表示されるのは、ほとんどの関数がを使用しているためdecodeURIComponent()です。ノルウェー語の文字はescape()、のようなものを使用してエンコードされている可能性が高く、decodeURIComponent()呼び出しをanに変更するとunescape()役立つはずです。
Kevin M

最新のソリューションについての私の回答をご覧ください:stackoverflow.com/a/19992436/64949
Sindre Sorhus '15 / 11/13

回答:


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

33
name = 'bar'、私はこの正規表現が一致'foobar=10'して戻ると思います'10'。多分あなた'[?|&]'はあなたの正規表現の最初に追加することができます。乾杯!
セバスチャンロッカセラ2011

34
パラメータが定義されていない場合、この関数はnullではなくnullを返します... jsの喜び...
Damien

12
あなたがURLパラメータとしてで戻りURLのような興味深いデータを渡している場合は特に、「は、decodeURIComponent()」の代わりに「decodeURIを()」よいでしょう
完璧主義

25
これは良いですが、decodeURIComponentの方が優れています。たとえば、paramにhashtag(%23)があり、それはdecodeURIによって無視されます。そして、私はnullを返しませんが、 ""です。これは、奇妙な戻り値であるdecodeURI(null)=== "null"であるため、 ""のほうが優れています。if(getURLParameter( "param")=== "null")の代わりにif(!getURLParameter( "param"))を実行できます。だから、私の改良版:decodeURIComponent((RegExp(name + '=' + '(。+?)(&| $)')。exec(location.search)|| [、 ""])[1])
standup75

3
結果が見つかったかどうかに関係なく、また代替配列eg [、null]に何を置いたかに関係なく、これが文字列を返すため、投票結果は不賛成でした。なぜなら、結果がdecodeURI内にラップされ、文字列に変換されるため、Sanjeevは正しかったが、彼のコードテストは正しく行われず、単純なコピーと貼り付けは機能しません。function getURLParameter(name) { var p = RegExp(name + '=' + '(.+?)(&|$)').exec(location.search); if(!!p) { p = decodeURI(p[1]); } return p; }
Lukasz 'Severiaan' Grela

295

以下は、私がここのコメントから作成したもの、および言及されていないバグ(実際には「null」ではなくnullを返すなど)の修正です。

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

6
newRegExpの前に追加するのはどうですか?糸くずの警告を減らします。
ripper234 2012

18
これは受け入れられる答えになるはずです。「null」の代わりに実際のnullを取得する方がはるかに優れています。
アート

11
これをcoffeescriptに変換する必要がある場合:getURLParameter:(name)-> return decodeURIComponent((new RegExp( "[?|&]#{name} =([^&;] +?)(&| ## |; | $) ")。exec(location.search)|| [null、" "])[1] .replace(/ \ + / g、 '%20'))|| null;
Redbeard

1
@Redbeard-関数の後に、関数の後にダブルコロンではなく「=」記号を付けないでください。
ジッピー2013

1
これは、UTF8文字列で動作するget-URL-parameter関数の唯一のバージョンです。
間違いなく

107

本当に必要なのは、jQuery URLパーサープラグインです。このプラグインを使用すると、(現在の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'

他の機能もあります。ドキュメントや例については、ホームページをご覧ください。

代わりにすることを、この特定の目的のために、独自のURIパーサーを書くのちょっとで動作するほとんどの場合、実際のURIパーサーを使用しています。回答によっては、他の回答からのコードがの'null'代わりに返さnullれる場合があります。空のパラメーター(?foo=&bar=x)では機能せず、すべてのパラメーターを一度に解析して返すことはできません。パラメーターのURLを繰り返しクエリする場合は、作業を繰り返します。

実際のURIパーサーを使用してください。独自のURIパーサーを作成しないでください。

jQueryを嫌う人のために、純粋なJSであるバージョンのプラグインがあります


23
問題は、「jQueryでURLパラメータを取得する」です。私の答えは質問に答えます。他の回答は、ユーザーに基本的にこの特定のユースケース用の独自のURIパーサーを書くように指示します。これはひどい考えです。URIの解析は、人々が考えるよりも複雑です。
Lucas

2
これは私が探していた答えであり、他のいくつかの答えとは異なり、非常にjQuery風です。
Ehtesh Choudhury 2013

プラグインはURIエンコーディングを処理しますか、それとも手動でデコードする必要がありますか?
Roberto Linares

質問は「javascript」(直接DOMを意味すると思います)またはjQueryを言います。ですから、他の人はそうするでしょう。
brunoais 2013年

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
はい、これはすべてのパラメータを取得するのに適しています。ここにリストされている他のすべてのソリューションは、各パラメーターに対して正規表現を繰り返します。
バーナード

この関数は{"": undefined}、URLにパラメーターがない場合に、厄介なオブジェクトを返します。割り当てのif(searchString=='') return {};直後に使用して空のオブジェクトを返すのが最善searchStringです。
ジョーダンアルセノ2013

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
unescape()の代わりにdecodeURIComponent()を使用することをお勧めします
freedev

+1これは最新のブラウザで動作しますが、一部の開発者は動作する必要があります...:| IE8:S
brunoais 2013年

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

すべての回答を読んだ後、このバージョンでは、フラグとしてパラメータを使用する2つ目の関数が追加されました。

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
良い答えですが、警告は1つだけです。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の見た目はますます美しくなくなります。
Lodewijk 2014

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

URLにパラメーターとして格納されている動的変数を取得し、スクリプトで使用できるようにJavaScript変数として格納するためのjQueryコードスニペット:

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

-1

念のため、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];
    }
}

-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
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.