복붙노트

[JQUERY] 어떻게 jQuery를 또는 일반 자바 스크립트를 사용하여 매개 변수 URL을 얻으려면?

JQUERY

어떻게 jQuery를 또는 일반 자바 스크립트를 사용하여 매개 변수 URL을 얻으려면?

해결법

  1. 1.여기에 최고의 솔루션입니다.

    여기에 최고의 솔루션입니다.

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

    당신이 URL은 가정이 기능을 사용하는 방법 그리고 이것은이다 http://dummy.com/?technology=jquery&blog=jquerybyexample.

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

  2. 2.2020에서 솔루션

    2020에서 솔루션

    우리는이 : http://example.com?sent=yes

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

    합니까 존재를 보내?

    searchParams.has('sent') // true

    이 "예"와 같다?

    let param = searchParams.get('sent')

    다음 단지 비교합니다.

  3. 3.jQuery 코드는 매개 변수로 URL에 저장된 동적 변수를 얻고 자바 스크립트 변수 스크립트 사용하기 위해 준비로 저장하는 니펫을 :

    jQuery 코드는 매개 변수로 URL에 저장된 동적 변수를 얻고 자바 스크립트 변수 스크립트 사용하기 위해 준비로 저장하는 니펫을 :

    $.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¶m2=&id=6

    $.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

    예 공백 PARAMS

    http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast



console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast

  4. 4.난 항상 한 행이 스틱. 이제 PARAMS 바르있다 :

    난 항상 한 행이 스틱. 이제 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

  5. 5.또 다른 대안 기능 ...

    또 다른 대안 기능 ...

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

  6. 6.너무 늦기 될 수 있습니다. 그러나이 방법은 매우 쉽고 간단합니다

    너무 늦기 될 수 있습니다. 그러나이 방법은 매우 쉽고 간단합니다

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

    최신 정보 URL이 플러그인을 필요 : plugins.jquery.com/url를 감사합니다 -Ripounet를

  7. 7.URLSearchParams 사용 :

    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)

  8. 8.또는이 깔끔한 작은 기능을 사용할 수 있습니다, 솔루션을 overcomplicated 이유 때문에?

    또는이 깔끔한 작은 기능을 사용할 수 있습니다, 솔루션을 overcomplicated 이유 때문에?

    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
}

    이는 단순화 및 onelined 더 나은 때 보이는 :

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

    result:
queryDict['sent'] // undefined or '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"

  9. 9.이것은 간단하고 나를 위해 일한입니다

    이것은 간단하고 나를 위해 일한입니다

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

  10. 10.아마 당신은 치과 JS에게 모습을 제공 할 수 있습니다? (면책 조항 : 나는 코드를 작성)

    아마 당신은 치과 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와 함께 발견 당신은 기본적으로 모든 문자열 (예를 들어, document.URL.extract ())의 추출물 () 함수를 호출 할 수 있습니다 그리고 당신은 모든 매개 변수는 HashMap을 다시 얻을. 그것은 구분 기호와 모든 처리도 사용자 정의 할 수 있습니다.

    축소 된 버전 <1킬로바이트

  11. 11.나는이 의지의 도움을 바랍니다.

    나는이 의지의 도움을 바랍니다.

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

  12. 12.함수 GetRequestParam (PARAM) { VAR 고해상도 = NULL; 시험{ VAR QS = decodeURIComponent ((1) window.location.search.substring); // 다음 후 모든 것을 얻을 '?' URI에서 VAR qs.split AR = ( '&'); $ .each (AR, 함수 (a, b) { VAR KV b.split = ( '='); 경우 (PARAM === KV [0]) { 입술 KV = [1]; false를 반환; // 휴식 루프 } }); } 캐치 (전자) {} 고해상도를 반환; }

    함수 GetRequestParam (PARAM) { VAR 고해상도 = NULL; 시험{ VAR QS = decodeURIComponent ((1) window.location.search.substring); // 다음 후 모든 것을 얻을 '?' URI에서 VAR qs.split AR = ( '&'); $ .each (AR, 함수 (a, b) { VAR KV b.split = ( '='); 경우 (PARAM === KV [0]) { 입술 KV = [1]; false를 반환; // 휴식 루프 } }); } 캐치 (전자) {} 고해상도를 반환; }

  13. 13.http://jsfiddle.net/xy7cX/ 데모이 작업을 시도하십시오

    http://jsfiddle.net/xy7cX/ 데모이 작업을 시도하십시오

    불:

    이 도움이 될 것입니다 :)

    암호

    var url = "http://myurl.com?sent=yes"

var pieces = url.split("?");
alert(pieces[1] + " ===== " + $.inArray("sent=yes", pieces));

  14. 14.당신은 어떤 URL을 사용하여 가치를 얻을 수있는 간단한 그래서

    당신은 어떤 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"

    참고 : 매개 변수가 여러 번하는 경우 (? 첫째 = 값 1 & 초 = 값 2), 당신이 (값 2)로 첫 번째 값 (값 1)과 두 번째 값을 얻을 것이다.

  15. 15.이 위대한 도서관이있다 : https://github.com/allmarkedup/purl

    이 위대한 도서관이있다 : 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를 사용하고 가정된다. 당신은 또한 그냥 일반 자바 스크립트로, 구문은 다음 조금 다른 것 그것을 사용할 수 있습니다.

  16. 16.이 과잉 될 수도 있지만 꽤 인기있는 라이브러리는 구문 분석 된 URI라는 URI.js.을 위해 사용할 수있다

    이 과잉 될 수도 있지만 꽤 인기있는 라이브러리는 구문 분석 된 URI라는 URI.js.을 위해 사용할 수있다

    VAR URI = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow"; VAR 성분 = URI.parse (URI); VAR 쿼리 = URI.parseQuery (성분 [ '질의']); . document.getElementById를 ( "결과") = innerHTML을 "URI ="+ URI; . document.getElementById를 ( "결과") innerHTML을 + = "기술로
    ="+ 질의 [ '기술']; // 당신이 당신의 콘솔에서 보면,이 라이브러리가 다중 값 쿼리에 대한 JS 배열을 생성하는 것을 볼 수 있습니다! CONSOLE.LOG (질의 [ '기술']); CONSOLE.LOG (쿼리 [ '블로그']); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.min.js"> <스팬 ID = "결과">

  17. 17.이것은 당신에게 일에 좋은 개체를 줄 것이다

    이것은 당신에게 일에 좋은 개체를 줄 것이다

        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') { .....

  18. 18.이것은 Gazoris의 답변에 따라,하지만 URL은 숫자와 문자 이외의 데이터를 포함 할 때 사용 할 수 있도록 매개 변수를 디코딩한다 :

    이것은 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;
}

  19. 19.URI.js 라이브러리를 사용하는 또 다른 예는있다.

    URI.js 라이브러리를 사용하는 또 다른 예는있다.

    예는 질문에 정확히 같은 요청에 응답합니다.

    var에 URL = 'http://example.com?sent=yes'; var에 urlParams = 새로운 URI (URL) .search (TRUE); // 1.합니까 존재를 보내? ! = VAR sendExists urlParams.sent == 미정; // 2.이 "예"와 같다? VAR sendIsEqualtToYes = urlParams.sent == '예'; // 읽을 수있는 형태로 출력 결과 // 생산을 위해 필요하지 {(sendExists)의 경우 CONSOLE.LOG는 ( 'URL이 PARAM, 그 값은 "전송"을 가지고' '+ urlParams.sent +' ''); 경우 (urlParams.sent == '예') { CONSOLE.LOG ( ' "전송"PARAM "예"동일하다 "); } 다른 { ( 'PARAM "예"와 동일하지 않은 "보냄"') CONSOLE.LOG; } } 다른 { 을 console.log ( 'URL hasn \'t "보냈습니다"PARAM '); } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js">

  20. 20.

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

  21. 21.사미르의 대답의 커피 스크립트 버전

    사미르의 대답의 커피 스크립트 버전

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

  22. 22.사미르의 대답에 약간의 개선, 폐쇄에 캐시 PARAMS는 모든 매개 변수마다 호출을 통해 구문 분석 및 루핑 방지하기 위해

    사미르의 대답에 약간의 개선, 폐쇄에 캐시 PARAMS는 모든 매개 변수마다 호출을 통해 구문 분석 및 루핑 방지하기 위해

    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];
    }
})();

  23. 23.나는 이것을 사용하고 작동합니다. http://codesheet.org/codesheet/NF246Tzs

    나는 이것을 사용하고 작동합니다. 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"];

  24. 24.바닐라 자바 ​​스크립트를 사용하면 쉽게 (?를하지 않고) 문자열을 얻을의 PARAMS (location.search)를 취할 수 있으며 '&'로 분할하여 배열 변환합니다.

    바닐라 자바 ​​스크립트를 사용하면 쉽게 (?를하지 않고) 문자열을 얻을의 PARAMS (location.search)를 취할 수 있으며 '&'로 분할하여 배열 변환합니다.

    urlParams 통해 반복 처리, 당신은 다음 '='다시 문자열을 분할하고 객체 [elmement [0] = 요소 [1]과 같이 'PARAMS'객체에 추가 할 수있다. 슈퍼 간단하고 쉽게 액세스 할 수.

    http://www.website.com/?error=userError&type=handwritten

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

  25. 25.무엇이 & 경우 파일 이름과 같은 URL 매개 변수 = "P & g.html"& UID = 66

    무엇이 & 경우 파일 이름과 같은 URL 매개 변수 = "P & g.html"& UID = 66

    이 경우 제 1 기능이 제대로 작동하지 않습니다. 내가 코드를 수정 그래서

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

  26. 26.틀림없이 내가 오버 대답 질문에 대한 내 대답을 추가 해요,하지만이의 장점이 있습니다 :

    틀림없이 내가 오버 대답 질문에 대한 내 대답을 추가 해요,하지만이의 장점이 있습니다 :

    - jQuery를 포함한 모든 외부 라이브러리에 의존하지 않음

    - 확장 '문자열'로, 전역 함수 이름 공간을 오염하지 않음

    - 전역 데이터를 생성하고 일치 FOUND 후 불필요한 처리를 수행하지 않음

    - 취급 문제를 인코딩 및 접수 (가정) 비 - 암호화 파라미터의 이름

    - 루프를 명시 적으로 방지

    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

  27. 27.특정의 URL에서 특정 매개 변수를 찾으려면 :

    특정의 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"));

  28. 28.당신이 객체를 통해 매개 변수 값에 액세스 할 수 있도록, jQuery를하고 JSON을 사용하는 다른 솔루션입니다.

    당신이 객체를 통해 매개 변수 값에 액세스 할 수 있도록, 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은 빈 객체가 될 것입니다.

  29. 29.

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

  30. 30.이것을 사용

    이것을 사용

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

    31. from https://stackoverflow.com/questions/19491336/how-to-get-url-parameter-using-jquery-or-plain-javascript by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] JQuery와 APPEND SVG 요소와 작동하지?  (0) 2020.09.23
[JQUERY] 어떻게입니다 onbeforeunload 대화 상자를 무시하고 내 자신으로 대체 할 수 있습니까?  (0) 2020.09.23
[JQUERY] jQuery를하고 Ajax를 기본 인증을 사용하여  (0) 2020.09.23
[JQUERY] 크로스 도메인 iframe이 문제  (0) 2020.09.23
[JQUERY] jQuery를이 요소와 관련된 모든 CSS 스타일을받을 수 있습니까?  (0) 2020.09.22
,

티스토리툴바