development

jquery는 URL에서 querystring을 얻습니다.

big-blog 2020. 4. 1. 08:00
반응형

jquery는 URL에서 querystring을 얻습니다.


가능한 중복 :
쿼리 문자열 값을 어떻게 얻을 수 있습니까?

다음 URL이 있습니다.

http://www.mysite.co.uk/?location=mylocation1

필요한 것은 locationURL 의 값을 변수로 가져 와서 jQuery 코드에서 사용하는 것입니다.

var thequerystring = "getthequerystringhere"

$('html,body').animate({scrollTop: $("div#" + thequerystring).offset().top}, 500);

누구나 JavaScript 또는 jQuery를 사용하여 그 가치를 얻는 방법을 알고 있습니까?


보낸 사람 : http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html

이것은 당신이 필요로하는 것입니다 :)

다음 코드는 URL 매개 변수가 포함 된 JavaScript 객체를 반환합니다.

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    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;
}

예를 들어 URL이있는 경우 :

http://www.example.com/?me=myValue&name2=SomeOtherValue

이 코드는 다음을 반환합니다.

{
    "me"    : "myValue",
    "name2" : "SomeOtherValue"
}

그리고 당신은 할 수 있습니다 :

var me = getUrlVars()["me"];
var name2 = getUrlVars()["name2"];

?문자로 시작하여 현재 URL에서 전체 쿼리 문자열을 검색하려면

location.search

https://developer.mozilla.org/en-US/docs/DOM/window.location

예:

// URL = https://example.com?a=a%20a&b=b123
console.log(location.search); // Prints "?a=a%20a&b=b123" 

클래스와 같은 있지만 반면, 특정의 쿼리 문자열 매개 변수를 검색에 관해서 URLSearchParamsURL존재, 그들은이 시간에 인터넷 익스플로러에서 지원하지 않는, 아마도 피해야한다. 대신 다음과 같이 시도해보십시오.

/**
 * Accepts either a URL or querystring and returns an object associating 
 * each querystring parameter to its value. 
 *
 * Returns an empty object if no querystring parameters found.
 */
function getUrlParams(urlOrQueryString) {
  if ((i = urlOrQueryString.indexOf('?')) >= 0) {
    const queryString = urlOrQueryString.substring(i+1);
    if (queryString) {
      return _mapUrlParams(queryString);
    } 
  }

  return {};
}

/**
 * Helper function for `getUrlParams()`
 * Builds the querystring parameter to value object map.
 *
 * @param queryString {string} - The full querystring, without the leading '?'.
 */
function _mapUrlParams(queryString) {
  return queryString    
    .split('&') 
    .map(function(keyValueString) { return keyValueString.split('=') })
    .reduce(function(urlParams, [key, value]) {
      if (Number.isInteger(parseInt(value)) && parseInt(value) == value) {
        urlParams[key] = parseInt(value);
      } else {
        urlParams[key] = decodeURI(value);
      }
      return urlParams;
    }, {});
}

위와 같이 사용할 수 있습니다.

// Using location.search
let urlParams = getUrlParams(location.search); // Assume location.search = "?a=1&b=2b2"
console.log(urlParams); // Prints { "a": 1, "b": "2b2" }

// Using a URL string
const url = 'https://example.com?a=A%20A&b=1';
urlParams = getUrlParams(url);
console.log(urlParams); // Prints { "a": "A A", "b": 1 }

// To check if a parameter exists, simply do:
if (urlParams.hasOwnProperty('parameterName') { 
  console.log(urlParams.parameterName);
}


일부 jQuery와 직선 JS 로이 작업을 수행하는 쉬운 방법은 Chrome 또는 Firefox에서 콘솔을보고 출력을 확인하십시오 ...

  var queries = {};
  $.each(document.location.search.substr(1).split('&'),function(c,q){
    var i = q.split('=');
    queries[i[0].toString()] = i[1].toString();
  });
  console.log(queries);

stackoverflow 답변을 살펴보십시오 .

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

이 방법을 사용하여 애니메이션을 적용 할 수 있습니다.

즉 :

var thequerystring = getParameterByName("location");
$('html,body').animate({scrollTop: $("div#" + thequerystring).offset().top}, 500);

우리는 이런 식으로 ...

String.prototype.getValueByKey = function (k) {
    var p = new RegExp('\\b' + k + '\\b', 'gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p) + k.length + 1).substr(0, this.substr(this.search(p) + k.length + 1).search(/(&|;|$)/))) : "";
};

참고 URL : https://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url


반응형