Как я могу получить определенный параметр из location.search?

Ответ 1

Мой любимый способ получения параметров URL-адресов заключается в следующем:

var parseQueryString = function() {

    var str = window.location.search;
    var objURL = {};

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
            objURL[ $1 ] = $3;
        }
    );
    return objURL;
};

//Example how to use it: 
var params = parseQueryString();
alert(params["foo"]); 

Ответ 2

Не-регулярный подход, вы можете просто разделить на символ '&' и итерации через пару ключ/значение:

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 val[1];
    }
  }
  return null;
}

Ответ 3

Вы можете использовать window.URL класс:

new URL(location.href).searchParams.get('year')
// Returns 2008 for href = "http://localhost/search.php?year=2008".
// Or in two steps:
const params = new URL(location.href).searchParams;
const year = params.get('year');

Ответ 4

Этот вопрос старый, и все изменилось в JavaScript. Теперь вы можете сделать это:

const params = {}
document.location.search.substr(1).split('&').forEach(pair => {
  [key, value] = pair.split('=')
  params[key] = value
})

и вы получите params.year который содержит 2008. Вы также получите другие параметры запроса в вашем объекте params.

Изменить: более короткий/чистый способ сделать это:

const params = new Map(location.search.slice(1).split('&').map(kv => kv.split('=')))

Затем вы можете проверить, существует ли year параметр с помощью:

params.has('year')  // true

Или получить его с помощью:

params.get('year')  // 2008

Ответ 5

Следующие выражения используют регулярные выражения и выполняют поиск только по части строки запроса URL-адреса.

Самое главное, этот метод поддерживает нормальные и массивные параметры, как в http://localhost/?fiz=zip&foo[]=!!=&bar=7890#hashhashhash

function getQueryParam(param) {
    var result =  window.location.search.match(
        new RegExp("(\\?|&)" + param + "(\\[\\])?=([^&]*)")
    );

    return result ? result[3] : false;
}

console.log(getQueryParam("fiz"));
console.log(getQueryParam("foo"));
console.log(getQueryParam("bar"));
console.log(getQueryParam("zxcv"));

Вывод:

zip
!!=
7890
false

Ответ 6

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

Ответ 7

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

Я использую библиотеку parseUri, доступную здесь: http://stevenlevithan.com/demo/parseuri/js/

Это позволяет вам делать именно то, что вы просите:

var uri = 'http://localhost/search.php?year=2008';
var year = uri.queryKey['year'];
// year = '2008'

Ответ 8

Самый простой способ - иметь

if (document.location.search.indexOf('yourtext=') >= 0) {
    // your code
} else {
    // what happens?
}

IndexOf()

Функция indexOf(text) возвращает

• ЦЕЛЫЙ НОМЕР НИЖЕ 0, когда текст, переданный в функции, не находится в любой переменной или строке, которую вы ищете - в этом случае document.location.search.
• ЦЕЛЫЙ НОМЕР РАВНО 0 ИЛИ ВЫСОКИЙ, когда текст, переданный в функции, находится в любой переменной или строке, которую вы ищете - в этом случае document.location.search.

Я надеюсь, что это было полезно, @gumbo

Ответ 9

Простое однострочное решение:

let query = Object.assign.apply(null, location.search.slice(1).split('&').map(entry => ({ [entry.split('=')[0]]: entry.split('=')[1] })));

Расширенное & Разъяснение:

// define variable
let query;

// fetch source query
query = location.search;

// skip past the '?' delimiter
query = query.slice(1);

// split source query by entry delimiter
query = query.split('&');

// replace each query entry with an object containing the query entry
query = query.map((entry) => {

   // get query entry key
   let key = entry.split('=')[0];

   // get query entry value
   let value = entry.split('=')[1];

   // define query object
   let container = {};

   // add query entry to object
   container[key] = value;

   // return query object
   return container;
});

// merge all query objects
query = Object.assign.apply(null, query);

Ответ 10

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

parseQueryString = function() {
    var str = window.location.search;
    var objURL = {};

    // local isArray - defer to underscore, as we are already using the lib
    var isArray = _.isArray

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){

            if(objURL[ $1 ] && !isArray(objURL[ $1 ])){
                // if there parameter occurs more than once, convert to an array on 2nd
                var first = objURL[ $1 ]
                objURL[ $1 ] = [first, $3]
            } else if(objURL[ $1 ] && isArray(objURL[ $1 ])){
                // if there parameter occurs more than once, add to array after 2nd
                objURL[ $1 ].push($3)
            }
            else
            {
                // this is the first instance
                objURL[ $1 ] = $3;
            }

        }
    );
    return objURL;
};

Ответ 11

Я немного поиграл с этой проблемой, и с этой целью я использовал это:

function getJsonFromUrl() {
  return Object.assign(...location.search.substr(1).split("&").map(sliceProperty));
}

• Object.assign, чтобы преобразовать список объектов в один объект
• Оператор spread ... для преобразования массива в список
• location.search.substr(1).split("&"), чтобы получить все параметры в виде массива свойств (foo=bar)
• map перемещайте все свойства и разделите их на массив (либо вызовите splitProperty, либо sliceProperty).

splitProperty:

  function splitProperty(pair) {
    [key, value] = pair.split("=")
    return { [key]: decodeURIComponent(value) }
  }

• Разделить на =
• Деконструировать массив в массив из двух элементов
• Возвращает новый объект с синтаксисом динамического свойства

sliceProperty:

  function sliceProperty(pair) {
    const position = pair.indexOf("="),
      key = pair.slice(0, position),
      value = pair.slice(position + 1, pair.length);
    return { [key]: decodeURIComponent(value) }
  }

• Задайте позицию =, ключ и значение
• Возвращает новый объект с синтаксисом динамического свойства

Я думаю, splitProperty красивее, но sliceProperty работает быстрее. Запустите JsPerf для получения дополнительной информации.

Ответ 12

Получить параметры из location.search в одну строку:

const params = new Map(this.props.location.search.slice(1).split('&').map(param => param.split('=')))

Тогда просто:

if(params.get("year")){
  //year exists. do something...
} else {
  //year doesn't exist. do something else...
}

Ответ 13

ES6 ответ:

const parseQueryString = (path = window.location.search) =>
  path.slice(1).split('&').reduce((car, cur) => {
   const [key, value] = cur.split('=')
   return { ...car, [key]: value } 
  }, {})

например:

parseQueryString('?foo=bar&foobar=baz')
// => {foo: "bar", foobar: "baz"}

Ответ 14

Это то, что я люблю делать:

window.location.search
    .substr(1)
    .split('&')
    .reduce(
        function(accumulator, currentValue) {
            var pair = currentValue
                .split('=')
                .map(function(value) {
                    return decodeURIComponent(value);
                });

            accumulator[pair[0]] = pair[1];

            return accumulator;
        },
        {}
    );

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

Я оставляю это на ваше усмотрение.