web-dev-qa-db-ja.com

JavaScriptを使用してURLからGETデータを読み取る方法

あるページから別のページにデータを渡そうとしています。

www.mints.com?name=something

JavaScriptを使用してnameを読み取る方法は？

javascriptparsingurl
41
jbcedge
function parseURLParams(url) {
    var queryStart = url.indexOf("?") + 1,
        queryEnd   = url.indexOf("#") + 1 || url.length + 1,
        query = url.slice(queryStart, queryEnd - 1),
        pairs = query.replace(/\+/g, " ").split("&"),
        parms = {}, i, n, v, nv;

    if (query === url || query === "") return;

    for (i = 0; i < pairs.length; i++) {
        nv = pairs[i].split("=", 2);
        n = decodeURIComponent(nv[0]);
        v = decodeURIComponent(nv[1]);

        if (!parms.hasOwnProperty(n)) parms[n] = [];
        parms[n].Push(nv.length === 2 ? v : null);
    }
    return parms;
}

次のように使用します。

var urlString = "http://www.foo.com/bar?a=a+a&b%20b=b&c=1&c=2&d#hash";
    urlParams = parseURLParams(urlString);

次のようなオブジェクトを返します。

{
  "a"  : ["a a"],     /* param values are always returned as arrays */
  "b b": ["b"],       /* param names can have special chars as well */
  "c"  : ["1", "2"]   /* an URL param can occur multiple times!     */
  "d"  : [null]       /* parameters without values are set to null  */ 
}

そう

parseURLParams("www.mints.com?name=something")

与える

{name: ["something"]}

[〜＃〜] edit [〜＃〜]： この回答の元のバージョン は正規表現ベースのアプローチを使用してURL解析。短い関数を使用しましたが、アプローチに欠陥があったため、適切なパーサーに置き換えました。

60
Tomalak

2019年です。手書きのソリューションやサードパーティのライブラリは必要ありません。ブラウザで現在のページのURLを解析する場合：

# running on https://www.example.com?name=n1&name=n2
let params = new URLSearchParams(location.search);
params.get('name') # => "n1"
params.getAll('name') # => ["n1", "n2"]

ブラウザまたはNode.jsでランダムなURLを解析する場合：

let url = 'https://www.example.com?name=n1&name=n2';
let params = (new URL(url)).searchParams;
params.get('name') # => "n1"
params.getAll('name') # => ["n1", "n2"]

最新のブラウザに付属している RLSearchParams インターフェースを利用しています。

10
Franklin Yu

私はこれもうまくいくと思う：

function $_GET(q,s) {
    s = (s) ? s : window.location.search;
    var re = new RegExp('&amp;'+q+'=([^&amp;]*)','i');
    return (s=s.replace(/^\?/,'&amp;').match(re)) ?s=s[1] :s='';
}

次のように呼び出します。

var value = $_GET('myvariable');
6
Steven

location.search https://developer.mozilla.org/en/DOM/window.location

ほとんどの場合、何らかの種類の解析ルーチンを使用してクエリ文字列パラメーターを読み取ります。

ここに1つあります http://safalra.com/web-design/javascript/parsing-query-strings/

3
Chad Grant

1つの解決策があります。もちろん、この関数は「window.params」オプションにロードする必要はありません-これはカスタマイズ可能です。

window.params = function(){
    var params = {};
    var param_array = window.location.href.split('?')[1].split('&');
    for(var i in param_array){
        x = param_array[i].split('=');
        params[x[0]] = x[1];
    }
    return params;
}();

http://www.mints.com/myurl.html?name=something&goal=true でのAPI呼び出しの例：

if(window.params.name == 'something') doStuff();
else if( window.params.goal == 'true') shoutGOOOOOAAALLL();
3
drostie

私の場合、現在選択されている答えはまったくうまくいきませんでしたが、これはかなり典型的なものだと思います。私は以下の関数を見つけました here そしてそれはうまくいきます！

function getAllUrlParams(url) {

  // get query string from url (optional) or window
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // we'll store the parameters here
  var obj = {};

  // if query string exists
  if (queryString) {

    // stuff after # is not part of query string, so get rid of it
    queryString = queryString.split('#')[0];

    // split our query string into its component parts
    var arr = queryString.split('&');

    for (var i=0; i<arr.length; i++) {
      // separate the keys and the values
      var a = arr[i].split('=');

      // in case params look like: list[]=thing1&list[]=thing2
      var paramNum = undefined;
      var paramName = a[0].replace(/\[\d*\]/, function(v) {
        paramNum = v.slice(1,-1);
        return '';
      });

      // set parameter value (use 'true' if empty)
      var paramValue = typeof(a[1])==='undefined' ? true : a[1];

      // (optional) keep case consistent
      paramName = paramName.toLowerCase();
      paramValue = paramValue.toLowerCase();

      // if parameter name already exists
      if (obj[paramName]) {
        // convert value to array (if still string)
        if (typeof obj[paramName] === 'string') {
          obj[paramName] = [obj[paramName]];
        }
        // if no array index number specified...
        if (typeof paramNum === 'undefined') {
          // put the value on the end of the array
          obj[paramName].Push(paramValue);
        }
        // if array index number specified...
        else {
          // put the value at that index number
          obj[paramName][paramNum] = paramValue;
        }
      }
      // if param name doesn't exist yet, set it
      else {
        obj[paramName] = paramValue;
      }
    }
  }

  return obj;
}
1
plaidcorp

Iv'eはトマラックの答えを修正/改善しました：

  • 必要な場合にのみ配列を作成します。
  • 値に別の方程式記号がある場合、値の中に入れます
  • 現在、location.search URLの代わりの値。
  • 空の検索文字列は空のオブジェクトになります。

コード：

function getSearchObject() {
    if (location.search === "") return {};

    var o = {},
        nvPairs = location.search.substr(1).replace(/\+/g, " ").split("&");

    nvPairs.forEach( function (pair) {
        var e = pair.indexOf('=');
        var n = decodeURIComponent(e < 0 ? pair : pair.substr(0,e)),
            v = (e < 0 || e + 1 == pair.length) 
                ? null : 
                decodeURIComponent(pair.substr(e + 1,pair.length - e));
        if (!(n in o))
            o[n] = v;
        else if (o[n] instanceof Array)
            o[n].Push(v);
        else
            o[n] = [o[n] , v];
    });
    return o;
}
1
EliSherer

また、かなり単純な関数を作成しました。 get（ "yourgetname"）;で呼び出します。

そこにあったものは何でも手に入れましょう。 （今、私はそれを書いたので、値に＆があった場合、％26が得られることに気付きました。）

function get(name){
  var url = window.location.search;
  var num = url.search(name);
  var namel = name.length;
  var frontlength = namel+num+1; //length of everything before the value 
  var front = url.substring(0, frontlength);  
  url = url.replace(front, "");  
  num = url.search("&");

 if(num>=0) return url.substr(0,num); 
 if(num<0)  return url;             
}
0
Peter Wegrzyn

このようにしてみてください。例えば：www.example.com?id=1

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.search);
    return (results !== null) ? results[1] || 0 : false;
}
console.log($.urlParam('id'));

それが役に立てば幸い。 :)

0
Malar Lala

この方法を試してください

var url_string = window.location;
var url = new URL(url_string);
var name = url.searchParams.get("name");
var tvid = url.searchParams.get("id");
0
Lasitha Lakmal