programing

jQuery 또는 플레인 자바스크립트를 사용하여 URL 매개 변수를 가져오는 방법은 무엇입니까?

megabox 2023. 5. 9. 22:11
반응형

jQuery 또는 플레인 자바스크립트를 사용하여 URL 매개 변수를 가져오는 방법은 무엇입니까?

매개 변수 크기와 이름을 알 수 없는 jQuery 예제를 많이 보았습니다.

내 URL에는 문자열이 한 개만 포함됩니다.

http://example.com?sent=yes

나는 단지 감지하고 싶을 뿐입니다.

  1. 있습니까?sent존재합니까?
  2. "예"와 같습니까?

최고의 해결책입니다.

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = 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 : decodeURIComponent(sParameterName[1]);
        }
    }
    return false;
};

이 "URL"이라고 했을 때 할 수 있습니다.
http://dummy.com/?technology=jquery&blog=jquerybyexample.

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

2023년 솔루션

다음이 있습니다: http://example.com?sent=yes

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

발송이 존재합니까?

searchParams.has('sent') // true

"예"와 같습니까?

let param = searchParams.get('sent')

그 다음에 비교해보세요.

jQuery 코드 스니펫은 URL에 저장된 동적 변수를 매개 변수로 가져오고 스크립트에서 사용할 수 있는 JavaScript 변수로 저장합니다.

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

example.com?param1=name&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

저는 항상 이것을 한 줄로 붙입니다.이제 Params에는 다음과 같은 변수가 있습니다.

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

또 다른 대체 기능은...

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

용사를 합니다.URLSearchParams:

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

호환성에 주의하십시오(대부분 문제가 없지만 IE와 Edge는 이야기가 다를 수 있습니다. 호환되는 참조를 확인하십시오. https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)

너무 늦었을 수도 있습니다.하지만 이 방법은 매우 쉽고 간단합니다.

<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"
});

UPDATE
다음 URL 플러그인이 필요합니다. plugins.jquery.com/url
합니다 - 리포네 - 리넷포.

아니면 이 깔끔하고 작은 기능을 사용할 수도 있습니다. 왜 너무 복잡한 솔루션일까요?

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

단순화하고 한 줄로 연결하면 더욱 보기 좋습니다.

tl;드론 라인 솔루션

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

결과:queryDict['sent'] // 정의되지 않았거나 'value'

하지만 암호화된 문자나 다중값 키가 있다면 어떨까요?

다음과 같은 답변을 보는 것이 좋습니다.자바스크립트에서 쿼리 문자열 값을 가져오려면 어떻게 해야 합니까?

슬릭피크

"?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"

이것은 간단하고 저에게 효과가 있었습니다.

$.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'));

아마도 당신은 치과의사 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"

치과의사 JS를 사용하면 기본적으로 모든 문자열(예: 문서)에서 extract() 함수를 호출할 수 있습니다.URL.extract()를 클릭하면 발견된 모든 매개 변수의 해시맵이 반환됩니다.구분 기호 및 모든 항목을 사용자 지정할 수도 있습니다.

최소화된 버전 < 1kb

이것이 도움이 되길 바랍니다.

 <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>

이 작업 데모를 사용해 보십시오. 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') { .....

오버킬일 수 있지만 URI를 구문 분석하는 데 사용할 수 있는 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>

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;
}

모든 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)이 (value2)로 표시됩니다.

훌륭한 도서관이 있습니다: 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를 사용하고 있다고 가정합니다.또한 일반 자바스크립트처럼 사용할 수 있으며, 구문이 조금 다를 수 있습니다.

http://example.com?sent=yes

최고의 해결책입니다.

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

위의 기능을 사용하면 개별 파라미터 값을 얻을 수 있습니다.

getUrlParameter('sent');

이는 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;
}

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>

Sameer의 답변을 커피스크립트 버전으로 보여줍니다.

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의 응답이 약간 개선되었습니다. 호출할 때마다 모든 매개 변수를 구문 분석하고 반복하지 않도록 매개 변수를 폐쇄로 캐시합니다.

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"];

바닐라 자바스크립트를 사용하면 매개변수(위치)를 쉽게 가져갈 수 있습니다.search), 부분 문자열(? 없이)을 가져와 '&'으로 나누어 배열로 바꿉니다.

urlParams를 통해 반복할 때 '='로 문자열을 다시 분할하여 'params' 개체에 object[elment[0]] = element[1]로 추가할 수 있습니다.매우 간단하고 쉽게 접근할 수 있습니다.

http://www.website.com/ ?error=userError&type= 손으로 작성됨

            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'];

filename="p&g.filename"&uid=66과 같은 & in URL 매개 변수가 있으면 어떻게 합니까?

이 경우 첫 번째 기능이 제대로 작동하지 않습니다.그래서 코드를 수정했습니다.

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빈 개체일 뿐입니다.

$.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;
}

언급URL : https://stackoverflow.com/questions/19491336/how-to-get-url-parameter-using-jquery-or-plain-javascript

반응형

'programing' 카테고리의 다른 글

jQuery를 사용하여 링크에서 클릭을 트리거하는 방법  (0) 2023.05.09
텍스트 상자에 자리 표시자 텍스트 추가  (0) 2023.05.09
엑셀에서 달력 주를 날짜로 변환하려면 어떻게 해야 합니까?  (0) 2023.05.09
배열의 크기를 찾는 방법(첫 번째 요소 배열을 가리키는 포인터에서)?  (0) 2023.05.04
전체 ASP에 대해 브라우저 캐시를 비활성화합니다.NET 웹사이트  (0) 2023.05.04

'programing'의 다른글

  • 현재글jQuery 또는 플레인 자바스크립트를 사용하여 URL 매개 변수를 가져오는 방법은 무엇입니까?

관련글

댓글

티스토리툴바