jQuery / Javascript(querystring)를 사용하여 쿼리 문자열 매개 변수 URL 값 가져오기

jQuery / Javascript(querystring)를 사용하여 쿼리 문자열 매개 변수 URL 값 가져오기

쿼리 문자열 매개 변수를 처리하기 위해 jQuery 확장자를 작성하는 좋은 방법을 아는 사람?저는 기본적으로 jQuery 마법을 확장하고 싶습니다.($)기능을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

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

그러면 다음 URL에서 "test" 값을 얻을 수 있습니다.http://www.example.com/index.php?search=test.

jQuery와 자바스크립트에서 이것을 할 수 있는 기능을 많이 보았지만, 사실 jQuery를 위와 같이 정확히 작동하도록 확장하고 싶습니다.저는 jQuery 플러그인을 찾고 있는 것이 아니라 jQuery 메서드의 확장을 찾고 있습니다.

몇 년 동안 보기 흉한 문자열 구문 분석 작업을 거친 후 더 나은 방법이 있습니다. URL 검색 매개 변수 이 새로운 API를 사용하여 위치에서 값을 얻는 방법을 살펴봅시다!

//Assuming URL has "?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가 지원되지 않습니다.

URL 검색 파라미터 대신 아래 답변에서 이 함수를 사용합니다.

$.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.locationobject(하지만 전역 변수를 쉽게 사용할 수 있음):

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를 사용할 수도 있습니다.

제이쿼리jQuery-URL-Parser 플러그인도 동일한 작업을 수행합니다. 예를 들어 다음 값을 검색합니다.검색 쿼리 문자열 매개 변수, 사용할 수 있는

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

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

대신 js-url을 사용할 수도 있습니다.그것은 아래의 것과 상당히 비슷합니다.

그래서 당신은 다음과 같이 쿼리 매개변수에 접근할 수 있습니다.$.url('?search')

사이트포인트에 있는 친구들에게서 이 보석을 발견했습니다.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's 등 없음)를 반환하는 순수 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;
}

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

이거 써요.

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

     //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 getQueryStringValue(uri, key) {        
        var regEx = new RegExp("[\\?&]" + key + "=([^&#]*)");        
        var matches = uri.match(regEx);
        return matches == null ? null : matches[1];
}

function testQueryString(){
   var uri = document.getElementById("uri").value;
   var searchKey = document.getElementById("searchKey").value;
   var result = getQueryStringValue(uri, searchKey);
   document.getElementById("result").value = result;
}

<input type="text" id="uri" placeholder="Uri"/>
<input type="text" id="searchKey" placeholder="Search Key"/>
<Button onclick="testQueryString()">Run</Button><br/>

<input type="text" id="result" disabled placeholder="Result"/>

언급URL : https://stackoverflow.com/questions/7731778/get-query-string-parameters-url-values-with-jquery-javascript-querystring