web-dev-qa-db-ja.com

jQuery / Javascript（querystring）でクエリ文字列パラメータのURL値を取得する

クエリ文字列パラメータを扱うためのjQuery拡張を書く良い方法を知っている人はいますか？私は基本的に私がこのようなことをすることができるようにjQueryマジック($)関数を拡張したいです：

$('?search').val();

これは私に次のURLで値 "test"を与えるでしょう：http://www.example.com/index.php?search=test。

私はjQueryとJavascriptでこれを行うことができる多くの機能を見ました、しかし私は実際に上に示されているように正確に動作するようにjQueryを拡張したいです。私はjQueryプラグインを探しているのではなく、jQueryメソッドの拡張を探しています。

javascriptjqueryurljquery-pluginsquery-string
131
matwonk

SitePointで私たちの友人からこの宝石を見つけました。 https://www.sitepoint.com/url-parameters-jquery/ 。

PURE jQueryを使用する。私はこれを使っただけでうまくいった。例としてそれを少し微調整しました。

//URL is http://www.example.com/mypage?ref=registration&[email protected]

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('ref')); //registration
console.log($.urlParam('email')); //[email protected]

あなたがそうするように使用してください。

57
ClosDesign

なぜjQueryを拡張するのかjQueryを拡張することと、単にグローバル機能を持​​たせることの利点は何でしょうか。

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}

http://jsfiddle.net/gilly3/sgxcL/

別の方法は、クエリ文字列全体を解析し、後で使用するために値をオブジェクトに格納することです。このアプローチは正規表現を必要とせず、window.locationオブジェクトを拡張します（ただし、グローバル変数を同じくらい簡単に使用できます）。

location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    location.queryString[parts[0]] = parts[1] &&
        decodeURIComponent(parts[1].replace(/\+/g, " "));
});

http://jsfiddle.net/gilly3/YnCeu/

このバージョンではArray.forEach()も使用しています。これはIE7およびIE8ではネイティブには利用できません。 MDNでの実装 を使って追加することも、jQueryの $.each() を代わりに使うこともできます。

100
gilly3

JQuery jQuery-URL-Parser プラグインは、例えばsearchクエリ文字列パラメータの値を取得するために同じ仕事をします、あなた使える

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

このライブラリは積極的にメンテナンスされていません。同じプラグインの作者が示唆しているように、 RI.js を使うことができます。

あるいは、代わりに js-url を使用することもできます。それは以下のものと非常に似ています。

だからあなたは$.url('?search')のようなクエリパラメータにアクセスすることができます

94
RameshVel

これは私のコードサンプルではありませんが、過去に使用しました。

//First Add this to extend jQuery

    $.extend({
      getUrlVars: function(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
          hash = hashes[i].split('=');
          vars.Push(hash[0]);
          vars[hash[0]] = hash[1];
        }
        return vars;
      },
      getUrlVar: function(name){
        return $.getUrlVars()[name];
      }
    });

    //Second call with this:
    // Get object of URL parameters
    var allVars = $.getUrlVars();

    // Getting URL var by its name
    var byName = $.getUrlVar('name');
45
Rob Nield

長年醜い文字列を解析した後は、もっと良い方法があります。URLSearchParamsこの新しいAPIを使用してその場所から値を取得する方法を見てみましょう。

// "？post = 1234＆action = edit"と仮定します

var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?

post=1234&action=edit&active=1"

更新：IEはサポートされていません

URLSearchParamsの代わりにこの関数を使用してください。

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

console.log($.urlParam('action')); //edit
22
Saurin

私はあなたがクエリパラメータの名前を解析する必要があるだけの小さな関数を書きました。 ？Project = 12＆Mode = 200＆date = 2013-05-27で 'Mode'パラメータが必要な場合は、 'Mode'名を関数に解析するだけで済みます。

function getParameterByName( name ){
    var regexS = "[\\?&]"+name+"=([^&#]*)", 
  regex = new RegExp( regexS ),
  results = regex.exec( window.location.search );
  if( results == null ){
    return "";
  } else{
    return decodeURIComponent(results[1].replace(/\+/g, " "));
  }
}

// example caller:
var result =  getParameterByName('Mode');
14
Plippie

上記の@Rob Neildの答えに基づいて、これはデコードされたクエリ文字列パラメータの単純なオブジェクトを返す純粋なJSの適応です（％20以外など）。

function parseQueryString () {
  var parsedParameters = {},
    uriParameters = location.search.substr(1).split('&');

  for (var i = 0; i < uriParameters.length; i++) {
    var parameter = uriParameters[i].split('=');
    parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
  }

  return parsedParameters;
}
6
user1936007

バニラジャバスクリプトで書かれて

     //Get URL
     var loc = window.location.href;
     console.log(loc);
     var index = loc.indexOf("?");
     console.log(loc.substr(index+1));
     var splitted = loc.substr(index+1).split('&');
     console.log(splitted);
     var paramObj = [];
     for(var i=0;i<splitted.length;i++){
         var params = splitted[i].split('=');
         var key = params[0];
         var value = params[1];
         var obj = {
             [key] : value
         };
         paramObj.Push(obj);
         }
    console.log(paramObj);
    //Loop through paramObj to get all the params in query string.
1
manish Prasad
function parseQueryString(queryString) {
    if (!queryString) {
        return false;
    }

    let queries = queryString.split("&"), params = {}, temp;

    for (let i = 0, l = queries.length; i < l; i++) {
        temp = queries[i].split('=');
        if (temp[1] !== '') {
            params[temp[0]] = temp[1];
        }
    }
    return params;
}

私はこれを使います。

1
donvercety