제이쿼리 - url 매개 변수 jquery 가져 오기 또는 js에서 쿼리 문자열 값 가져 오는 방법




제이쿼리 attr (20)

매개 변수의 크기와 이름을 알 수없는 jQuery 예제를 많이 보았습니다. 내 URL은 오직 하나의 문자열을 가질 것입니다 :

http://example.com?sent=yes

나는 단지 탐지하고 싶다.

  1. sent 있습니까?
  2. 그것은 "예"와 동등한가요?

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

Sameer의 대답의 Coffeescript 버전

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

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

공백이있는 params 예제

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



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

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 이라고 가정합니다 http://example.com/?search=hello+world&language=en&page=3

그 후에는 다음과 같은 매개 변수를 사용하는 경우에만 문제가됩니다.

param.language

돌려 주다

en

가장 유용한 방법은 페이지로드시이를 실행하고 전역 변수를 사용하여 필요할 때마다 매개 변수를 사용하는 것입니다.

매개 변수에 숫자 값이 포함되어 있으면 값을 구문 분석하십시오.

parseInt(param.page)

매개 변수가없는 경우 param 은 빈 객체입니다.


간단하므로 모든 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)을 가져옵니다.


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

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

<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 plugin이 필요합니다 : plugins.jquery.com/url
고마워요.


또 다른 대체 기능은 ...

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

바닐라 자바 ​​스크립트를 사용하면 params (location.search)를 쉽게 가져올 수 있으며 하위 문자열 (?을 포함하지 않음)을 가져 와서 배열로 '&'로 분할하여 쉽게 사용할 수 있습니다.

urlParams를 반복하면서 '='을 사용하여 문자열을 다시 분할하고 'params'객체에 객체 [elmement [0]] = element [1]로 추가 할 수 있습니다. 슈퍼 간단하고 액세스하기 쉽습니다.

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

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

Dentist JS를 사용하면 기본적으로 모든 문자열 (예 : document.URL.extract ())에서 extract () 함수를 호출 할 수 있으며 찾은 모든 매개 변수의 HashMap을 돌려받을 수 있습니다. 분리 문자와 모두를 처리하는 것도 사용자 정의 할 수 있습니다.

축소 버전 <1kb


이 훌륭한 도서관이 있습니다 : 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를 사용한다고 가정합니다. 당신은 또한 일반 자바 스크립트처럼 사용할 수 있습니다. 구문은 약간 다릅니다.


이것은 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://.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}

이것은 당신에게 좋은 물건을 줄 것입니다.

    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를 파싱 할 때 github.com/medialize/URI.js 라고하는 꽤 인기있는 라이브러리가 있습니다.

var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=";
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>


이것이 도움이되기를 바랍니다.

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

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

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>


URLSearchParams 사용 :

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

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


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




querystringparameter