web-dev-qa-db-ja.com

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

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

?search=%E6%F8%E5

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

æøå

（文字はノルウェー語です）。

サーバーにアクセスできないので、サーバー上で何かを変更することはできません。

javascripturlquery-stringurl-parameters
301
Sindre Sorhus

このようなことにjQueryを使うべきではありません！
現代的な方法は、Bowerのようなパッケージマネージャを通して小さな再利用可能なモジュールを使うことです。

クエリ文字列をオブジェクトに解析できる小さな モジュール を作成しました。このように使用してください。

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå
2
Sindre Sorhus
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
418
James

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

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

あなたが本当に欲しいのは jQuery URL Parserプラグイン です。このプラグインを使うと、（現在のURLの）特定のURLパラメータの値を取得するのはこのようになります。

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

パラメータ名をキーとして、パラメータ値を値として持つオブジェクトが必要な場合は、引数なしでparam()を呼び出すだけです。

$.url().param();

このライブラリは現在のURLだけでなく他の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 をチェックしてください。

kinda が most の場合に機能するというこの特定の目的のための独自のURIパーサーを作成する代わりに、実際のURIパーサーを使用してください。回答によっては、他の回答からのコードがnullの代わりに'null'を返すことがあり、空のパラメータ（?foo=&bar=x）を扱えず、一度にすべてのパラメータを解析して返すことができない。

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

JQueryを嫌う人のために、 ピュアJS というプラグインのバージョンがあります。

107
Lucas

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内のパラメータの操作も可能にするライブラリを公開しました。

43
Edward Anderson

ブラウザのネイティブ 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プラグインがあります。

40
CMS

999の答えに基づいて ：

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

変更点

  • decodeURI()はdecodeURIComponent()に置き換えられます
  • 正規表現の最初に[?|&]が追加されています
26
Eugene Yarmash

大文字小文字を区別しないようにするには、iパラメーターを追加する必要があります。

  function getURLParameter(name) {
    return decodeURIComponent(
      (RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
    );
  }
6
Scott Wojan
$.urlParam = function(name){
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(top.window.location.href); 
  return (results !== null) ? results[1] : 0;
}

$.urlParam("key");
2
Yoshi

たとえば、任意のパラメータ変数の値を返す関数です。

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"になります。

2
Rubyist

すべての答えを読んだ後、私はフラグとしてパラメータを使うための+第二の関数でこのバージョンに行き着きました

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)
}
1
Neon

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

</script>

getURLParameter(id)またはgetURLParameter(Id)は同じように動作します。）

0
user2310887

ここにはバグの多いコードがたくさんあり、正規表現による解決策はとても遅いです。私は正規表現のものよりも最大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
George Anthony