Получить параметр url jquery или Как получить значения строки запроса в js

Я видел много примеров на jQuery, где размер и имя неизвестны. Мой url-адрес будет иметь только 1 строку:

http://example.com?sent=yes

Я просто хочу обнаружить:

  1. тут ?
  2. равно ли это "да"?

30 ответов


лучшим решением здесь.

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

и вот как вы можете использовать эту функцию, предполагая, что URL-адрес,
http://dummy.com/?technology=jquery&blog=jquerybyexample.

var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');

фрагмент кода jQuery, чтобы получить динамические переменные, хранящиеся в url-адресе в качестве параметров, и сохранить их как переменные JavaScript, готовые к использованию с вашими скриптами:

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

Пример.com?param1=имя & param2= & id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

пример параметров с пробелами

http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast



console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast

решение от 2018

у нас есть:http://example.com?sent=yes

let searchParams = new URLSearchParams(window.location.search)

тут отправлено exist?

searchParams.has('sent') // true

это равной "да"?

let param = searchParams.get('sent')

а затем просто сравните его.


Я всегда придерживаюсь этого как одной линии. Теперь у params есть vars:

params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})

мульти-подкладка:

var params={};
window.location.search
  .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
    params[key] = value;
  }
);

функции

function getSearchParams(k){
 var p={};
 location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
 return k?p[k]:p;
}

который вы могли бы использовать как:

getSearchParams()  //returns {key1:val1, key2:val2}

или

getSearchParams("key1")  //returns val1

может быть слишком поздно. Но этот метод очень прост и прост

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990 -->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')      // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')       // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});

обновление
Требуется плагин url:plugins.jquery.com/url
Спасибо-Ripounet


или вы можете использовать эту аккуратную маленькую функцию, потому что почему слишком сложные решения?

function getQueryParam(param) {
    location.search.substr(1)
        .split("&")
        .some(function(item) { // returns first occurence and stops
            return item.split("=")[0] == param && (param = item.split("=")[1])
        })
    return param
}

что выглядит еще лучше при упрощении и onelined:

tl; dr однострочное решение

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
result:
queryDict['sent'] // undefined or 'value'

но что, если у вас есть закодированных символов или ключи многозначных?

вам лучше увидеть этот ответ:как я могу получить значения строки запроса в В JavaScript?

пик подхалима

"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> queryDict["a"][1] // "5"
> queryDict.a[1] // "5"

еще одна альтернативная функция...

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}

вы, возможно, захотите, чтобы дать стоматолог JS посмотреть? (отказ от ответственности: я написал код)

код:

document.URL == "http://helloworld.com/quotes?id=1337&author=kelvin&message=hello"
var currentURL = document.URL;
var params = currentURL.extract();
console.log(params.id); // 1337
console.log(params.author) // "kelvin"
console.log(params.message) // "hello"

С помощью Dentist JS вы можете в основном вызвать функцию extract () для всех строк (например, document.URL-АДРЕС.extract ()) и вы получаете обратно хэш-карту всех найденных параметров. Он также настраивается для работы с разделителями и все такое.

уменьшенная версия


Это простой и работал для меня

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

Итак, если Ваш url-адрес http://www.yoursite.com?city=4

попробуй такое

console.log($.urlParam('city'));

function GetRequestParam(param)
{
	var res = null;
	try{
		var qs = decodeURIComponent(window.location.search.substring(1));//get everything after then '?' in URI
		var ar = qs.split('&');
		$.each(ar, function(a, b){
			var kv = b.split('=');
			if(param === kv[0]){
				res = kv[1];
				return false;//break loop
			}
		});
	}catch(e){}
	return res;
}

надеюсь, это поможет.

 <script type="text/javascript">
   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;
   }

    $(window).load(function() {
      var param = getParameters();
      if (typeof param.sent !== "undefined") {
        // Do something.
      }
    });
</script>

есть большая библиотека: https://github.com/allmarkedup/purl

что позволяет делать просто

url = 'http://example.com?sent=yes';
sent = $.url(url).param('sent');
if (typeof sent != 'undefined') { // sent exists
   if (sent == 'yes') { // sent is equal to yes
     // ...
   }
}

пример предполагает, что вы используете jQuery. Вы также можете использовать его так же, как простой javascript, синтаксис будет немного отличаться.


это может быть излишним, но теперь есть довольно популярная библиотека для разбора URIs, называемая URI.js.

пример

var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow";
var components = URI.parse(uri);
var query = URI.parseQuery(components['query']);
document.getElementById("result").innerHTML = "URI = " + uri;
document.getElementById("result").innerHTML += "<br>technology = " + query['technology'];

// If you look in your console, you will see that this library generates a JS array for multi-valued queries!
console.log(query['technology']);
console.log(query['blog']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.min.js"></script>

<span id="result"></span>

используя URLSearchParams:

var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));

попробуй такое рабочая демо http://jsfiddle.net/xy7cX/

API:

Это должно помочь :)

код

var url = "http://myurl.com?sent=yes"

var pieces = url.split("?");
alert(pieces[1] + " ===== " + $.inArray("sent=yes", pieces));

это даст вам хороший объект для работы с

    function queryParameters () {
        var result = {};

        var params = window.location.search.split(/\?|\&/);

        params.forEach( function(it) {
            if (it) {
                var param = it.split("=");
                result[param[0]] = param[1];
            }
        });

        return result;
    }

и тогда

    if (queryParameters().sent === 'yes') { .....

это основано на Gazorisответ, но URL декодирует параметры, чтобы они могли использоваться, когда они содержат данные, отличные от цифр и букв:

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    // Need to decode the URL parameters, including putting in a fix for the plus sign
    // https://stackoverflow.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}

Так Просто вы можете использовать любой URL и получить значение

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Пример Использования

// query string: ?first=value1&second=&value2
var foo = getParameterByName('first'); // "value1"
var bar = getParameterByName('second'); // "value2" 

Примечание: если параметр присутствует несколько раз (?first=value1&second=value2), вы получите первое значение (value1) и второе значение как (value2).


есть еще один пример использования URI.js библиотека.

пример отвечает на вопросы точно так, как задано.

var url = 'http://example.com?sent=yes';
var urlParams = new URI(url).search(true);
// 1. Does sent exist?
var sendExists = urlParams.sent !== undefined;
// 2. Is it equal to "yes"?
var sendIsEqualtToYes = urlParams.sent == 'yes';

// output results in readable form
// not required for production
if (sendExists) {
  console.log('Url has "sent" param, its value is "' + urlParams.sent + '"');
  if (urlParams.sent == 'yes') {
    console.log('"Sent" param is equal to "yes"');
  } else {
    console.log('"Sent" param is not equal to "yes"');
  }
} else {
  console.log('Url hasn\'t "sent" param');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js"></script>

Coffeescript версия ответа Самира

getUrlParameter = (sParam) ->
  sPageURL = window.location.search.substring(1)
  sURLVariables = sPageURL.split('&')
  i = 0
  while i < sURLVariables.length
    sParameterName = sURLVariables[i].split('=')
    if sParameterName[0] == sParam
      return sParameterName[1]
    i++

небольшое улучшение ответа Sameer, Cache params в закрытие, чтобы избежать разбора и циклического прохождения всех параметров каждый раз при вызове

var getURLParam = (function() {
    var paramStr = decodeURIComponent(window.location.search).substring(1);
    var paramSegs = paramStr.split('&');
    var params = [];
    for(var i = 0; i < paramSegs.length; i++) {
        var paramSeg = paramSegs[i].split('=');
        params[paramSeg[0]] = paramSeg[1];
    }
    console.log(params);
    return function(key) {
        return params[key];
    }
})();

Я использую это и это работает. http://codesheet.org/codesheet/NF246Tzs

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
    });
return vars;
}


var first = getUrlVars()["id"];

С помощью vanilla JavaScript вы можете легко взять параметры (местоположение.поиск), получить подстроку (без ?) и превратите его в массив, разделив его на"&".

при итерации по urlParams вы можете снова разбить строку на " = "и добавить ее в объект "params" как объект[elmement[0]] = элемент[1]. Супер простой и легкий доступ.

http://www.website.com/?error=userError&type=handwritten

            var urlParams = location.search.substring(1).split('&'),
                params = {};

            urlParams.forEach(function(el){
                var tmpArr = el.split('=');
                params[tmpArr[0]] = tmpArr[1];
            });


            var error = params['error'];
            var type = params['type'];

Что делать, если есть параметр & in URL, например filename="p&g.html" &uid=66

в данном случае 1-я функция не будет работать должным образом. Поэтому я изменил код

function getUrlParameter(sParam) {
    var sURLVariables = window.location.search.substring(1).split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
}

По общему признанию, я добавляю свой ответ на вопрос с ответом, но у этого есть преимущества:

-- не зависит от каких-либо внешних библиотек, включая jQuery

-- не загрязняя пространство имен глобальных функций, путем расширения "String"

-- не создавая никаких глобальных данных и делая ненужную обработку после того, как матч найден

-- обработка проблем кодирования и принятие (при условии) некодированного имени параметра

-- избегая явное for петли

String.prototype.urlParamValue = function() {
    var desiredVal = null;
    var paramName = this.valueOf();
    window.location.search.substring(1).split('&').some(function(currentValue, _, _) {
        var nameVal = currentValue.split('=');
        if ( decodeURIComponent(nameVal[0]) === paramName ) {
            desiredVal = decodeURIComponent(nameVal[1]);
            return true;
        }
        return false;
    });
    return desiredVal;
};

тогда вы бы использовали его как:

var paramVal = "paramName".urlParamValue() // null if no match

Если вы хотите найти конкретный параметр из определенного url:

function findParam(url, param){
  var check = "" + param;
  if(url.search(check )>=0){
      return url.substring(url.search(check )).split('&')[0].split('=')[1];
  }
}  

var url = "http://www.yourdomain.com/example?id=1&order_no=114&invoice_no=254";  
alert(findParam(url,"order_no"));

другое решение, которое использует jQuery и JSON, поэтому вы можете получить доступ к значениям параметров через объект.

var loc = window.location.href;
var param = {};
if(loc.indexOf('?') > -1)
{
    var params = loc.substr(loc.indexOf('?')+1, loc.length).split("&");

    var stringJson = "{";
    for(var i=0;i<params.length;i++)
    {
        var propVal = params[i].split("=");
        var paramName = propVal[0];
        var value = propVal[1];
        stringJson += "\""+paramName+"\": \""+value+"\"";
        if(i != params.length-1) stringJson += ",";
    }
    stringJson += "}";
    // parse string with jQuery parseJSON
    param = $.parseJSON(stringJson);
}

предполагая, что Ваш URL-адрес http://example.com/?search=hello+world&language=en&page=3

после этого речь идет только об использовании таких параметров:

param.language

вернуться

en

самое полезное использование этого-запустить его при загрузке страницы и использовать глобальную переменную для использования параметров в любом месте, где они могут понадобиться.

если ваш параметр содержит числовые значения, а затем просто анализирует значение.

parseInt(param.page)

если нет параметров param будет просто пустым объектом.


http://example.com?sent=yes

лучшим решением здесь.

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\[').replace(/[\]]/, '\]');
    var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
};

С помощью функции выше вы можете получить индивидуальные значения параметров:

getUrlParameter('sent');

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

использовать

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