エスケープされたURLパラメーターを取得する
-
05-07-2019 - |
質問
URLパラメータを取得し、JavaScriptエラーを出力せずにこの検索文字列をサポートできるjQueryプラグインを探しています:「不正なURIシーケンス」。これをサポートするjQueryプラグインがない場合、これをサポートするように変更する方法を知る必要があります。
?search=%E6%F8%E5
URLパラメータの値は、デコードされたとき、次のようになります。
æøå
(文字はノルウェー語です)。
サーバーにアクセスできないため、サーバー上で何も変更できません。
解決 10
このようなことにはjQueryを使用しないでください!
最新の方法は、Bowerのようなパッケージマネージャーを使用して、小さな再利用可能なモジュールを使用することです。
クエリ文字列をオブジェクトに解析できる小さなモジュールを作成しました。次のように使用します:
// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå
他のヒント
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
以下は、ここでのコメントから作成したものであり、言及されていないバグ(「null」ではなく実際にnullを返すなど)を修正するものです。
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
本当に必要なのは、 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'
他の機能もあります。ドキュメントと例については、ホームページをご覧ください。
kind がほとんどのケースで機能するという特定の目的のために独自のURIパーサーを記述する代わりに、実際のURIパーサーを使用します。回答によっては、他の回答のコードが null
ではなく 'null'
を返すことがありますが、空のパラメーター(?foo =& bar = x
)、すべてのパラメータを一度に解析して返すことができず、パラメータなどのURLを繰り返しクエリした場合、作業を繰り返します。
実際のURIパーサーを使用します。独自のパーサーを作成しないでください。
jQueryを嫌う人のために、純粋なJSであるプラグインのバージョンがあります 。
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&amp; author = nilbus
のようなURLでgetParameters()を呼び出すと、以下が返されます。
{
date: '9/10/11',
author: 'nilbus'
}
質問からさらに離れているため、ここにはコードを含めませんが、weareon.netはURLのパラメーターを操作できるライブラリを投稿しました。
ブラウザのネイティブ 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プラグインがいくつかあります:
function getURLParameter(name) {
return decodeURIComponent(
(location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]
);
}
変更:
-
decodeURI()
はdecodeURIComponent()
に置き換えられます
-
[?|&amp;]
は正規表現の先頭に追加されます
大文字と小文字を区別しないようにiパラメータを追加する必要があります:
function getURLParameter(name) {
return decodeURIComponent(
(RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
);
}
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(top.window.location.href);
return (results !== null) ? results[1] : 0;
}
$.urlParam("key");
たとえば、任意のパラメータ変数の値を返す関数。
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が次のように仮定してこの関数を使用する方法です。
&quot; http://example.com/?technology = jquery&amp; blog = jquerybyexample&quot;。
var tech = GetURLParameter('technology');
var blog = GetURLParameter('blog');
上記のコード変数&quot; tech&quot;では、 &quot; jQuery&quot;値として&quot; blog&quot;変数は&quot; jquerybyexample&quot;になります。
すべての回答を読んだ後、フラグとしてパラメーターを使用するための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)
}
ここにはバグの多いコードがたくさんあり、正規表現ソリューションは非常に遅いです。正規表現よりも最大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"));
正規表現は、万能のソリューションではありません。この種の問題では、単純な文字列操作が非常に効率的に機能します。 コードソース。
<script type="text/javascript">
function getURLParameter(name) {
return decodeURIComponent(
(location.search.toLowerCase().match(RegExp("[?|&]" + name + '=(.+?)(&|$)')) || [, null])[1]
);
}
</script>
getURLParameter(id)
または getURLParameter(Id)
は同じように機能します:)
jQueryコードスニペットを使用して、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¶m2=&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
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";
}
}
次のような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
皆さんがlocalhost / index.xsp?a = 1#somethingのようなURLを持っている場合、ハッシュではなくparamを取得する必要があります。
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];
}
}
@pauloppenheimによる回答へのわずかな変更。他のパラメーター名の一部になり得るパラメーター名を適切に処理しないためです。
例:&quot; appenv&quot;がある場合&amp; &quot; env&quot; 「env」の値を再定義するパラメータ「appenv」をピックアップできます。値。
修正:
var urlParamVal = function (name) {
var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
return result ? decodeURIComponent(result[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>