[javascript]URL에서 파라미터 가져오기
/** * GET방식의 URL에서 파라미터를 가져온다.(배열 파라미터도 처리 가능) * 사용방법 : * let params1 = getAllUrlParams(); // 현재 url주소를 가져와서 파라미터를 추출한다. * let params2 = getAllUrlParams("www.jigi.net?a=1&b=2&c[1]=3&c[2]=4"); //입력한 URL주소를 가져와서 파라미터를 추출한다. */ function getAllUrlParams(url) { // get query string from url (optional) or window var queryString = url ? url.split('?')[1] : window.location.search.slice(1); // we'll store the parameters here var obj = {}; // if query string exists if (queryString) { // stuff after # is not part of query string, so get rid of it queryString = queryString.split('#')[0]; // split our query string into its component parts var arr = queryString.split('&'); for (var i = 0; i < arr.length; i++) { // separate the keys and the values var a = arr[i].split('='); // set parameter name and value (use 'true' if empty) var paramName = a[0]; var paramValue = typeof (a[1]) === 'undefined' ? true : a[1]; // (optional) keep case consistent ==> 파라미터명과 파라미터값을 모두 소문자로 처리하는 부분 //paramName = paramName.toLowerCase(); //if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase(); // if the paramName ends with square brackets, e.g. colors[] or colors[2] if (paramName.match(/\[(\d+)?\]$/)) { // create key if it doesn't exist var key = paramName.replace(/\[(\d+)?\]/, ''); if (!obj[key]) obj[key] = []; // if it's an indexed array e.g. colors[2] if (paramName.match(/\[\d+\]$/)) { // get the index value and add the entry at the appropriate position var index = /\[(\d+)\]/.exec(paramName)[1]; obj[key][index] = paramValue; } else { // otherwise add the value to the end of the array obj[key].push(paramValue); } } else { // we're dealing with a string if (!obj[paramName]) { // if it doesn't exist, create property obj[paramName] = paramValue; } else if (obj[paramName] && typeof obj[paramName] === 'string') { // if property does exist and it's a string, convert it to an array obj[paramName] = [obj[paramName]]; obj[paramName].push(paramValue); } else { // otherwise add the property obj[paramName].push(paramValue); } } } } return obj; } // 출처 : https://www.sitepoint.com/get-url-parameters-with-javascript/
최근 브라우저(IE 지원불가)에서는 아래 함수를 지원하여 더 간편하게 사용할 수 있다.
// URL is http://example.com/?product=shirt&color=blue&newuser&size=m const urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('product')); // true console.log(urlParams.get('product')); // "shirt" var paramsString = "q=URLUtils.searchParams&topic=api"; var searchParams = new URLSearchParams(paramsString); //Iterate the search parameters. for (let p of searchParams) { console.log(p); } searchParams.has("topic") === true; // true searchParams.get("topic") === "api"; // true searchParams.getAll("topic"); // ["api"] searchParams.get("foo") === null; // true searchParams.append("topic", "webdev"); searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev" searchParams.set("topic", "More webdev"); searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev" searchParams.delete("topic"); searchParams.toString(); // "q=URLUtils.searchParams" // 출처 : https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams
최신 댓글