Как получить строку запроса из текущего URL с помощью JavaScript?
У меня есть URL-адрес:
http://localhost/PMApp/temp.htm?ProjectID=462
Что мне нужно сделать, так это получить информацию после знака ?
(строка запроса) - это ProjectID=462
. Как я могу получить это с помощью JavaScript?
Что я сделал до сих пор:
var url = window.location.toString();
url.match(?);
Я не знаю, что делать дальше.
Ответы
Ответ 1
Взгляните на статью MDN о window.location
.
QueryString доступен в window.location.search
.
Решение, которое работает и в старых браузерах
MDN предоставляет пример (более недоступный в указанной выше статье) того, как получить значение одного ключа, доступного в QueryString. Что-то вроде этого:
function getQueryStringValue (key) {
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
// Would write the value of the QueryString-variable called name to the console
console.log(getQueryStringValue("name"));
В современных браузерах
В современных браузерах есть searchParams
свойство интерфейса URL, который возвращает URLSearchParams объект. Возвращаемый объект имеет ряд удобных методов, включая метод get. Таким образом, эквивалент приведенного выше примера будет:
let params = (new URL(document.location)).searchParams;
let name = params.get("name");
Интерфейс URLSearchParams также можно использовать для анализа строк в формате строки запроса и преобразования их в удобный объект URLSearchParams.
let paramsString = "name=foo&age=1337"
let searchParams = new URLSearchParams(paramsString);
searchParams.has("name") === true; // true
searchParams.get("age") === "1337"; // true
Обратите внимание, что поддержка браузера в этом интерфейсе по-прежнему ограничена, поэтому, если вам нужно поддерживать устаревшие браузеры, используйте первый пример или используйте полифилл.
Ответ 2
Используйте window.location.search
, чтобы получить все после ?
, включая ?
Пример:
var url = window.location.search;
url = url.replace("?", ''); // remove the ?
alert(url); //alerts ProjectID=462 is your case
Ответ 3
decodeURI(window.location.search)
.replace('?', '')
.split('&')
.map(param => param.split('='))
.reduce((values, [ key, value ]) => {
values[ key ] = value
return values
}, {})
Ответ 4
Это добавит глобальную функцию для доступа к переменным queryString в качестве карты.
// -------------------------------------------------------------------------------------
// Add function for 'window.location.query( [queryString] )' which returns an object
// of querystring keys and their values. An optional string parameter can be used as
// an alternative to 'window.location.search'.
// -------------------------------------------------------------------------------------
// Add function for 'window.location.query.makeString( object, [addQuestionMark] )'
// which returns a queryString from an object. An optional boolean parameter can be
// used to toggle a leading question mark.
// -------------------------------------------------------------------------------------
if (!window.location.query) {
window.location.query = function (source) {
var map = {};
source = source || this.search;
if ("" != source) {
var groups = source, i;
if (groups.indexOf("?") == 0) {
groups = groups.substr(1);
}
groups = groups.split("&");
for (i in groups) {
source = groups[i].split("=",
// For: xxx=, Prevents: [xxx, ""], Forces: [xxx]
(groups[i].slice(-1) !== "=") + 1
);
// Key
i = decodeURIComponent(source[0]);
// Value
source = source[1];
source = typeof source === "undefined"
? source
: decodeURIComponent(source);
// Save Duplicate Key
if (i in map) {
if (Object.prototype.toString.call(map[i]) !== "[object Array]") {
map[i] = [map[i]];
}
map[i].push(source);
}
// Save New Key
else {
map[i] = source;
}
}
}
return map;
}
window.location.query.makeString = function (source, addQuestionMark) {
var str = "", i, ii, key;
if (typeof source == "boolean") {
addQuestionMark = source;
source = undefined;
}
if (source == undefined) {
str = window.location.search;
}
else {
for (i in source) {
key = "&" + encodeURIComponent(i);
if (Object.prototype.toString.call(source[i]) !== "[object Array]") {
str += key + addUndefindedValue(source[i]);
}
else {
for (ii = 0; ii < source[i].length; ii++) {
str += key + addUndefindedValue(source[i][ii]);
}
}
}
}
return (addQuestionMark === false ? "" : "?") + str.substr(1);
}
function addUndefindedValue(source) {
return typeof source === "undefined"
? ""
: "=" + encodeURIComponent(source);
}
}
Enjoy.
Ответ 5
Вы можете использовать эту функцию, для разделения строки от? id =
function myfunction(myvar){
var urls = myvar;
var myurls = urls.split("?id=");
var mylasturls = myurls[1];
var mynexturls = mylasturls.split("&");
var url = mynexturls[0];
alert(url)
}
myfunction(window.top.location.href);
myfunction("http://www.myname.com/index.html?id=dance&emp;cid=in_social_facebook-hhp-food-moonlight-influencer_s7_20160623");
здесь fiddle
Ответ 6
window.location.href.slice(window.location.href.indexOf('?') + 1);
Ответ 7
Вы можете использовать свойство search
объекта window.location
для получения части запроса URL-адреса. Обратите внимание, что он включает в себя знак вопроса (?) В начале, на всякий случай, который влияет на то, как вы собираетесь его анализировать.
Ответ 8
var queryObj = {};
if(url.split("?").length>0){
var queryString = url.split("?")[1];
}
теперь у вас есть часть запроса в queryString
Первая замена удалит все пробелы, вторая заменит все "&" часть с "," и, наконец, третье место заменит ":" вместо знаков "=".
queryObj = JSON.parse('{"' + queryString.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
Итак, скажем, у вас был запрос типа abc = 123 & efg = 456. Теперь перед разбором ваш запрос преобразуется в нечто вроде { "abc": "123", "efg": "456" }. Теперь, когда вы проанализируете это, он предоставит вам ваш запрос в объекте json.
Ответ 9
Вы должны взглянуть на URL API, который имеет вспомогательные методы для достижения этого в нем как URLSearchParams
: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
В настоящее время это не поддерживается всеми современными браузерами, поэтому не забывайте polyfill его (Polyfill, используя https://qa.polyfill.io/).
Ответ 10
Преобразуйте это в массив, затем разделите с помощью '?'
var url= 'http://localhost/PMApp/temp.htm?ProjectID=462';
url.split('?')[1]; //ProjectID=462
Ответ 11
Попробуй это
/**
* Get the value of a querystring
* @param {String} field The field to get the value of
* @param {String} url The URL to get the value from (optional)
* @return {String} The field value
*/
var getQueryString = function ( field, url ) {
var href = url ? url : window.location.href;
var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
var string = reg.exec(href);
return string ? string[1] : null;
};
Допустим, ваш URL-адрес http://example.com&this=chicken&that=sandwich. Вы хотите получить значение этого, того и другого.
var thisOne = getQueryString('this'); // returns 'chicken'
var thatOne = getQueryString('that'); // returns 'sandwich'
var anotherOne = getQueryString('another'); // returns null
Если вы хотите использовать URL-адрес, отличный от URL-адреса в окне, вы можете передать его в качестве второго аргумента.
var yetAnotherOne = getQueryString('example', 'http://another-example.com&example=something'); // returns 'something'
Ссылка
Ответ 12
Если вы случайно использовать машинопись и есть РОМ в вашем Либерал из tsconfig.json
, вы можете сделать:
const url: URL = new URL(window.location.href);
const params: URLSearchParams = url.searchParams;
// get target key/value from URLSearchParams object
const yourParamValue: string = params.get('yourParamKey');
// To append, you can also leverage api to avoid the '?' check
params.append('newKey', 'newValue');
Ответ 13
q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;