Как получить строку запроса из текущего URL с помощью JavaScript?
у меня есть URL, как это:
http://localhost/PMApp/temp.htm?ProjectID=462
что мне нужно сделать, чтобы получить детали после ?
знак (строка запроса) - то есть ProjectID=462
. Как я могу получить это с помощью JavaScript?
то, что я сделал до сих пор это:
var url = window.location.toString();
url.match(?);
Я не знаю, что делать дальше.
11 ответов:
посмотреть статья MDN о
window.location
.строка запроса доступна в
window.location.search
.решение, которое работает и в устаревших браузерах
MDN приведите пример (больше не доступно в приведенной выше статье) как получить значение одного ключа в querystring. Что-то вроде этого:
function getQueryStringValue (key) { return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\$&") + "(?:\=([^&]*))?)?.*$", "i"), "")); } // Would write the value of the QueryString-variable called name to the console console.log(getQueryStringValue("name"));
в современной браузеры
в современных браузерах у вас есть
searchParams
свойство интерфейса URL, которое возвращает URLSearchParams
использовать
window.location.search
получить все, что после?
в том числе?
пример:
var url = window.location.search; url = url.replace("?", ''); // remove the ? alert(url); //alerts ProjectID=462 is your case
это добавит глобальную функцию для доступа к переменным строки запроса в виде карты.
// ------------------------------------------------------------------------------------- // 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); } }
наслаждайтесь.
вы можете использовать эту функцию, для разделения строки ?идентификатор=
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");
здесь скрипка
decodeURI(window.location.search) .replace('?', '') .split('&') .map(param => param.split('=')) .reduce((values, [ key, value ]) => { values[ key ] = value return values }, {})
можно использовать
search
свойстваwindow.location
объект для получения части запроса URL-адреса. Обратите внимание, что он включает в себя знак вопроса (?) в начале, на всякий случай, это влияет на то, как вы собираетесь его разобрать.
var queryObj = {}; if(url.split("?").length>0){ var queryString = url.split("?")[1]; }
теперь у вас есть часть запрос в строке
первая замена удалит все пробелы, вторая заменит всю часть " & "на", "И, наконец, третья замена поставит": "вместо знаков"=".
queryObj = JSON.parse('{"' + queryString.replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
предположим, что у вас был запрос abc=123 & efg=456. Теперь перед разбором, ваш запрос преобразуется в нечто вроде {"abc":"123","efg": "456"}. Теперь, когда вы будете анализировать это, он даст вам ваш запрос в json объект.
вы должны взглянуть на URL API, который имеет вспомогательные методы для достижения этого в нем как
URLSearchParams
: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParamsв настоящее время это не поддерживается всеми современными браузерами, поэтому не забудьте заполнить его (Polyfill доступно с помощью https://qa.polyfill.io/).
преобразовать это в массив, а затем разделить с '?-
var url= 'http://localhost/PMApp/temp.htm?ProjectID=462'; url.split('?')[1]; //ProjectID=462
попробуйте это
/** * 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-адрес, отличный от того, который находится в окне, вы можете передать его в качестве второго аргумента.
var yetAnotherOne = getQueryString('example', 'http://another-example.com&example=something'); // returns 'something'