누구나 쿼리 문자열 매개 변수를 처리하기 위해 jQuery 확장을 작성하는 좋은 방법을 알고 있습니까? 기본적으로 jQuery 매직 ($)기능 을 확장하여 다음과 같이 할 수 있습니다.

$('?search').val(); 

다음 URL에서 "test"값을 제공합니다 http://www.example.com/index.php?search=test.

jQuery와 Javascript 에서이 작업을 수행 할 수있는 많은 기능을 보았지만 실제로는 위에 표시된 그대로 작동하도록 jQuery를 확장하고 싶습니다. jQuery 플러그인을 찾지 않고 jQuery 메소드의 확장을 찾고 있습니다.

수년간의 추악한 문자열 구문 분석 후에 더 좋은 방법이 있습니다. URLSearchParams 이 새로운 API를 사용하여 위치에서 값을 얻는 방법을 살펴 보겠습니다!

// "? post = 1234 & action = edit"가정

var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?

post=1234&action=edit&active=1"

업데이트 : IE는 지원되지 않습니다

URLSearchParams 대신 아래 답변 에서이 기능을 사용하십시오.

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('action')); //edit

왜 jQuery를 확장해야합니까? jQuery를 확장하고 전역 기능을 갖는 것의 이점은 무엇입니까?

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}

http://jsfiddle.net/gilly3/sgxcL/

다른 방법은 전체 쿼리 문자열을 구문 분석하고 나중에 사용할 수 있도록 개체에 값을 저장하는 것입니다. 이 접근법은 정규 표현식을 요구하지 않고 window.location객체를 확장 하지만 전역 변수를 쉽게 사용할 수 있습니다.

location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    location.queryString[parts[0]] = parts[1] &&
        decodeURIComponent(parts[1].replace(/\+/g, " "));
});

http://jsfiddle.net/gilly3/YnCeu/

이 버전은 또한 Array.forEach()IE7 및 IE8에서 기본적으로 사용할 수없는를 사용합니다. MDN의 구현을 사용하여 추가 하거나 jQuery를 $.each()대신 사용할 수 있습니다 .

JQuery jQuery-URL-Parser 플러그인은 동일한 작업을 수행합니다. 예를 들어 검색어 문자열 매개 변수 의 값을 검색 하려면

$.url().param('search');

이 라이브러리는 적극적으로 유지 관리되지 않습니다. 동일한 플러그인의 작성자가 제안한대로 URI.js 를 사용할 수 있습니다 .

또는 대신 js-url을 사용할 수 있습니다 . 아래의 것과 매우 유사합니다.

따라서 다음과 같은 쿼리 매개 변수에 액세스 할 수 있습니다 $.url('?search')

SitePoint에서 친구들로부터이 보석을 찾았습니다. https://www.sitepoint.com/url-parameters-jquery/ .

PURE jQuery 사용 방금 이것을 사용했고 효과가있었습니다. 예를 들어 그것을 약간 조정했습니다.

//URL is http://www.example.com/mypage?ref=registration&email=bobo@example.com

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('ref')); //registration
console.log($.urlParam('email')); //bobo@example.com

당신이 원하는대로 사용하십시오.

이것은 내 코드 샘플이 아니지만 과거에 사용했습니다.

//First Add this to extend jQuery

    $.extend({
      getUrlVars: function(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
        }
        return vars;
      },
      getUrlVar: function(name){
        return $.getUrlVars()[name];
      }
    });

    //Second call with this:
    // Get object of URL parameters
    var allVars = $.getUrlVars();

    // Getting URL var by its name
    var byName = $.getUrlVar('name');

쿼리 매개 변수의 이름 만 구문 분석 해야하는 작은 함수를 작성했습니다. 따라서? Project = 12 & Mode = 200 & date = 2013-05-27이 있고 'Mode'매개 변수를 원하면 'Mode'이름 만 함수로 구문 분석하면됩니다.

function getParameterByName( name ){
    var regexS = "[\\?&]"+name+"=([^&#]*)", 
  regex = new RegExp( regexS ),
  results = regex.exec( window.location.search );
  if( results == null ){
    return "";
  } else{
    return decodeURIComponent(results[1].replace(/\+/g, " "));
  }
}

// example caller:
var result =  getParameterByName('Mode');

위의 @Rob Neild의 대답을 바탕으로, 여기에는 디코딩 된 쿼리 문자열 매개 변수의 간단한 객체 (% 20 등 없음)를 반환하는 순수한 JS 적응이 있습니다.

function parseQueryString () {
  var parsedParameters = {},
    uriParameters = location.search.substr(1).split('&');

  for (var i = 0; i < uriParameters.length; i++) {
    var parameter = uriParameters[i].split('=');
    parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
  }

  return parsedParameters;
}

바닐라 자바 ​​스크립트로 작성

     //Get URL
     var loc = window.location.href;
     console.log(loc);
     var index = loc.indexOf("?");
     console.log(loc.substr(index+1));
     var splitted = loc.substr(index+1).split('&');
     console.log(splitted);
     var paramObj = [];
     for(var i=0;i<splitted.length;i++){
         var params = splitted[i].split('=');
         var key = params[0];
         var value = params[1];
         var obj = {
             [key] : value
         };
         paramObj.push(obj);
         }
    console.log(paramObj);
    //Loop through paramObj to get all the params in query string.

function parseQueryString(queryString) {
    if (!queryString) {
        return false;
    }

    let queries = queryString.split("&"), params = {}, temp;

    for (let i = 0, l = queries.length; i < l; i++) {
        temp = queries[i].split('=');
        if (temp[1] !== '') {
            params[temp[0]] = temp[1];
        }
    }
    return params;
}

나는 이것을 사용합니다.