JavaScript에서 GET 파라미터를 취득하는 방법

JavaScript에서 GET 파라미터를 취득하는 방법

이 질문에는 이미 답변이 있습니다.

JavaScript에서 쿼리 문자열 값을 가져오려면 어떻게 해야 합니까? (73개의 답변)

닫힘5년 전에요.

고려사항:

http://example.com/page.html?returnurl=%2Fadmin

위해서js이내에page.html를 취득하려면 ,GET파라미터?

위의 간단한 예에서는func('returnurl')그래야 한다/admin.

하지만 복잡한 쿼리 문자열에도 사용할 수 있습니다.

window.location 객체를 사용합니다.이 코드는 물음표 없이 GET을 제공합니다.

window.location.search.substr(1)

이 예에서는 이 값이 반환됩니다.returnurl=%2Fadmin

편집: 저는 Qwerty의 답변을 바꿨습니다.그것은 정말 훌륭합니다.그리고 그가 지적한 것처럼 저는 OP가 질문한 것을 정확히 따랐습니다.

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

나는 그의 코드에서 중복된 함수 실행을 삭제하고 변수(tmp)를 대체하며 OP가 요구한 대로 추가했습니다.이것이 보안상의 문제인지 아닌지는 잘 모르겠습니다.

또는 IE8에서도 동작하는 플레인 for 루프를 사용하는 경우도 있습니다.

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}

window.location.search?부터 모든 것이 반환됩니다.다음 코드는 ?를 제거하고 분할을 사용하여 키/값 배열로 구분한 다음 명명된 속성을 params 개체에 할당합니다.

function getSearchParameters() {
    var prmstr = window.location.search.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

그런 다음 테스트 매개 변수를http://myurl.com/?test=1부름으로써params.test.

vanilla JavaScript를 사용한 코드 한 줄의 tl;dr 솔루션

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

이것이 가장 간단한 해결책입니다.유감스럽게도 다중값 키 및 인코딩된 문자는 처리되지 않습니다.

"?a=1&a=%2Fadmin&b=2&c=3&d&e"
> queryDict
a: "%2Fadmin"  // Overridden with the last value, not decoded.
b: "2"
c: "3"
d: undefined
e: undefined

다중값 키와 인코딩된 문자를 선택하십시오.

"How can I get query string values in JavaScript?"의 원답을 참조하십시오.

"?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&a=%2Fadmin"
> queryDict
a: ["1", "5", "t e x t", "/admin"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

---

이 예에서는 다음과 같은 값에 액세스합니다.

"?returnurl=%2Fadmin"
> qd.returnurl    // ["/admin"]
> qd['returnurl'] // ["/admin"]
> qd.returnurl[0] // "/admin"

URL 및 URLearchParams 네이티브 함수를 사용해야 합니다.

let url = new URL("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string")
let params = new URLSearchParams(url.search);
let sourceid = params.get('sourceid') // 'chrome-instant'
let q = params.get('q') // 'mdn query string'
let ie = params.has('ie') // true
params.append('ping','pong')

console.log(sourceid)
console.log(q)
console.log(ie)
console.log(params.toString())
console.log(params.get("ping"))

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://polyfill.io/v2/docs/features/

보다 세련된 방법::)

var options = window.location.search.slice(1)
                      .split('&')
                      .reduce(function _reduce (/*Object*/ a, /*String*/ b) {
                        b = b.split('=');
                        a[b[0]] = decodeURIComponent(b[1]);
                        return a;
                      }, {});

이것은 정규 표현을 사용하며 파라미터가 존재하지 않거나 값이 없는 경우 null을 반환합니다.

function getQuery(q) {
   return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1];
}

다음과 같이 실행합니다(특정 get-parameter를 취득하려면 여기서 'parameterName').

var parameterValue = decodeURIComponent(window.location.search.match(/(\?|&)parameterName\=([^&]*)/)[2]);

여기에서는 GET 파라미터를 보다 쉽게 사용할 수 있도록 오브젝트로 변환하기 위해 이 코드를 만들었습니다.

// Get Nav URL
function getNavUrl() {
    // Get URL
    return window.location.search.replace("?", "");
};

function getParameters(url) {
    // Params obj
    var params = {};
    // To lowercase
    url = url.toLowerCase();
    // To array
    url = url.split('&');

    // Iterate over URL parameters array
    var length = url.length;
    for(var i=0; i<length; i++) {
        // Create prop
        var prop = url[i].slice(0, url[i].search('='));
        // Create Val
        var value = url[i].slice(url[i].search('=')).replace('=', '');
        // Params New Attr
        params[prop] = value;
    }
    return params;
};

// Call of getParameters
console.log(getParameters(getNavUrl()));

var getQueryParam = function(param) {
    var found;
    window.location.search.substr(1).split("&").forEach(function(item) {
        if (param ==  item.split("=")[0]) {
            found = item.split("=")[1];
        }
    });
    return found;
};

URL에서 GET 파라미터에 접속하기 위한 간단한 JavaScript 함수를 만들었습니다.

이 JavaScript 소스를 포함하기만 하면get파라미터를 지정합니다.예: http://example.com/index.php?language=french,에서language에는 '하다'로 액세스 할 수 .$_GET["language"]모든 $_GET_Params와 HTML은 모두 으로 제공됩니다JavaScript HTML 。

<!DOCTYPE html>
<html>
  <body>
    <!-- This script is required -->
    <script>
    function $_GET() {
      // Get the Full href of the page e.g. http://www.google.com/files/script.php?v=1.8.7&country=india
      var href = window.location.href;

      // Get the protocol e.g. http
      var protocol = window.location.protocol + "//";

      // Get the host name e.g. www.google.com
      var hostname = window.location.hostname;

      // Get the pathname e.g. /files/script.php
      var pathname = window.location.pathname;

      // Remove protocol part
      var queries = href.replace(protocol, '');

      // Remove host part
      queries = queries.replace(hostname, '');

      // Remove pathname part
      queries = queries.replace(pathname, '');

      // Presently, what is left in the variable queries is : ?v=1.8.7&country=india

      // Perform query functions if present
      if (queries != "" && queries != "?") {

    // Remove question mark '?'
        queries = queries.slice(1);

        // Split all the different queries
        queries = queries.split("&");

        // Get the number of queries
        var length = queries.length;

        // Declare global variables to store keys and elements
        $_GET_Params = new Array();
        $_GET = {};

        // Perform functions per query
        for (var i  = 0; i < length; i++) {

          // Get the present query
          var key = queries[i];

          // Split the query and the value
          key = key.split("=");

          // Assign value to the $_GET variable
          $_GET[key[0]] = [key[1]];

          // Assign value to the $_GET_Params variable
          $_GET_Params[i] = key[0];
        }
      }
    }

    // Execute the function
    $_GET();
    </script>
    <h1>GET Parameters</h1>
    <h2>Try to insert some get parameter and access it through JavaScript</h2>
  </body>
</html>

다음은 Kat와 Bakudan의 예를 바탕으로 한 다른 예입니다. 하지만 좀 더 일반적인 예를 들어 보겠습니다.

function getParams ()
{
    var result = {};
    var tmp = [];

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

    return result;
}

location.getParams = getParams;

console.log (location.getParams());
console.log (location.getParams()["returnurl"]);

독자적으로 실장하는 대신에 라이브러리를 사용하는 것을 꺼려하지 않는 경우는, https://github.com/jgallen23/querystring 를 참조해 주세요.

이 솔루션은 URL 디코딩을 처리합니다.

var params = function() {
    function urldecode(str) {
        return decodeURIComponent((str+'').replace(/\+/g, '%20'));
    }

    function transformToAssocArray( prmstr ) {
        var params = {};
        var prmarr = prmstr.split("&");
        for ( var i = 0; i < prmarr.length; i++) {
            var tmparr = prmarr[i].split("=");
            params[tmparr[0]] = urldecode(tmparr[1]);
        }
        return params;
    }

    var prmstr = window.location.search.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}();

사용방법:

console.log('someParam GET value is', params['someParam']);

파라미터를 JSON 개체로 가져오려면 다음 절차를 수행합니다.

console.log(getUrlParameters())

function getUrlParameters() {
    var out = {};
    var str = window.location.search.replace("?", "");
    var subs = str.split(`&`).map((si)=>{var keyVal = si.split(`=`); out[keyVal[0]]=keyVal[1];});
    return out
}

나의 솔루션은 @tak3r로 확장된다.

빈 합니다.?a=1&a=2&a=3:

function getQueryParams () {
  function identity (e) { return e; }
  function toKeyValue (params, param) {
    var keyValue = param.split('=');
    var key = keyValue[0], value = keyValue[1];

    params[key] = params[key]?[value].concat(params[key]):value;
    return params;
  }
  return decodeURIComponent(window.location.search).
    replace(/^\?/, '').split('&').
    filter(identity).
    reduce(toKeyValue, {});
}

위치 개체에서 사용할 수 있는 검색 기능을 사용할 수 있습니다.검색 기능은 URL의 매개 변수 부분을 제공합니다. 자세한 내용은 위치 개체에서 확인할 수 있습니다.

변수와 값을 가져오기 위해 결과 문자열을 구문 분석해야 합니다(예: '='에서 변수와 값을 분할).

AngularJS를 사용하는 Angular를 할 수 .JS의 경우$routeParams를 사용합니다.ngRoute 표시

앱에 모듈을 추가해야 합니다.

angular.module('myApp', ['ngRoute'])

할 수 .$routeParams:

.controller('AppCtrl', function($routeParams) {
  console.log($routeParams); // JSON object
}

언급URL : https://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript