JavaScript에서 쿼리 문자열 구문 분석

JavaScript에서 쿼리 문자열 구문 분석

---

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

쿼리 문자열을 구문 분석해야합니다 www.mysite.com/default.aspx?dest=aboutus.aspx. destJavaScript 에서 변수를 어떻게 얻 습니까?

---

다음은 JavaScript에서 쿼리 문자열을 빠르고 쉽게 구문 분석하는 방법입니다.

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
    console.log('Query variable %s not found', variable);
}

이제 page.html? x = Hello에 요청하십시오 .

console.log(getQueryVariable('x'));

---

function parseQuery(queryString) {
    var query = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    }
    return query;
}

쿼리 문자열 hello=1&another=2을 object로 바꿉니다 {hello: 1, another: 2}. 거기에서 필요한 변수를 쉽게 추출 할 수 있습니다.

즉,와 같은 배열 사례를 처리하지 않습니다 "hello=1&hello=2&hello=3". 이 작업을 수행하려면 객체에 속성을 추가하기 전에 객체의 속성이 존재하는지 확인한 후 추가 비트를 밀어서 값을 배열로 설정해야합니다.

---

Rodney Rehm 의 우수한 URI.js 라이브러리를 사용할 수도 있습니다 . 방법은 다음과 같습니다.

var qs = URI('www.mysite.com/default.aspx?dest=aboutus.aspx').query(true); // == { dest : 'aboutus.aspx' }
    alert(qs.dest); // == aboutus.aspx

---

그리고 현재 페이지의 쿼리 문자열을 파싱하려면 :-

var $_GET = URI(document.URL).query(true); // ala PHP
    alert($_GET['dest']); // == aboutus.aspx 

---

나도! http://jsfiddle.net/drzaus/8EE8k/

(참고 : 공상 중첩 또는 중복 검사가 없음)

deparam = function (querystring) {
  // remove any preceding url and split
  querystring = querystring.substring(querystring.indexOf('?')+1).split('&');
  var params = {}, pair, d = decodeURIComponent;
  // march and parse
  for (var i = querystring.length - 1; i >= 0; i--) {
    pair = querystring[i].split('=');
    params[d(pair[0])] = d(pair[1] || '');
  }

  return params;
};//--  fn  deparam

그리고 테스트 :

var tests = {};
tests["simple params"] = "ID=2&first=1&second=b";
tests["full url"] = "http://blah.com/?" + tests["simple params"];
tests['just ?'] = '?' + tests['simple params'];

var $output = document.getElementById('output');
function output(msg) {
  $output.innerHTML += "\n" + Array.prototype.slice.call(arguments, 0).join("\n");
}
$.each(tests, function(msg, test) {
  var q = deparam(test);
  // prompt, querystring, result, reverse
  output(msg, test, JSON.stringify(q), $.param(q));
  output('-------------------');
});

결과 :

simple params
ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
full url
http://blah.com/?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
just ?
?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------

---

여기 내 버전은 위의 Braceyard 버전을 기반으로하지만 '사전'으로 구문 분석하고 '='없이 검색 인수를 지원합니다. 내 JQuery $ (document) .ready () 함수에서 사용하십시오. 인수는 argsParsed에 키 / 값 쌍으로 저장되며 어딘가에 저장하려고 할 수 있습니다 ...

'use strict';

function parseQuery(search) {

    var args = search.substring(1).split('&');

    var argsParsed = {};

    var i, arg, kvp, key, value;

    for (i=0; i < args.length; i++) {

        arg = args[i];

        if (-1 === arg.indexOf('=')) {

            argsParsed[decodeURIComponent(arg).trim()] = true;
        }
        else {

            kvp = arg.split('=');

            key = decodeURIComponent(kvp[0]).trim();

            value = decodeURIComponent(kvp[1]).trim();

            argsParsed[key] = value;
        }
    }

    return argsParsed;
}

parseQuery(document.location.search);

---

내 의견에서 @bobby 게시 된 답변에 이어 내가 사용할 코드는 다음과 같습니다.

    function parseQuery(str)
        {
        if(typeof str != "string" || str.length == 0) return {};
        var s = str.split("&");
        var s_length = s.length;
        var bit, query = {}, first, second;
        for(var i = 0; i < s_length; i++)
            {
            bit = s[i].split("=");
            first = decodeURIComponent(bit[0]);
            if(first.length == 0) continue;
            second = decodeURIComponent(bit[1]);
            if(typeof query[first] == "undefined") query[first] = second;
            else if(query[first] instanceof Array) query[first].push(second);
            else query[first] = [query[first], second]; 
            }
        return query;
        }

이 코드는 제공된 쿼리 문자열 ( 'str')을 받아서 객체를 반환합니다. 문자열은 &의 모든 어커런스로 분할되어 배열이됩니다. 그런 다음 배열이 트래버스되고 배열의 각 항목이 "="로 분할됩니다. 이로 인해 0 번째 요소가 매개 변수이고 1 번째 요소가 값인 하위 배열이 생성됩니다 (또는 = 부호가없는 경우 정의되지 않음). 이것들은 객체 속성에 매핑되므로 문자열 "hello = 1 & another = 2 & something"은 다음과 같이 바뀝니다.

{
hello: "1",
another: "2",
something: undefined
}

또한이 코드는 "hello = 1 & hello = 2"와 같은 반복되는 반복을 확인하고 결과를 배열로 변환합니다. 예 :

{
hello: ["1", "2"]
}

또한 = 부호가 사용되지 않는 경우를 다루는 것을 알 수 있습니다. 또한 & 기호 바로 뒤에 등호가 있는지 여부도 무시합니다.

원래 질문에 약간 과잉이지만 자바 스크립트에서 쿼리 문자열로 작업 해야하는 경우 재사용 가능한 솔루션 :)

---

쿼리 문자열 변수가 하나만 있다는 것을 알고 있다면 간단히 할 수 있습니다.

var dest = location.search.replace(/^.*?\=/, '');

---

다음 함수는 검색 문자열을 정규식으로 구문 분석하고 결과를 캐시하며 요청 된 변수의 값을 리턴합니다.

window.getSearch = function(variable) {
  var parsedSearch;
  parsedSearch = window.parsedSearch || (function() {
    var match, re, ret;
    re = /\??(.*?)=([^\&]*)&?/gi;
    ret = {};
    while (match = re.exec(document.location.search)) {
      ret[match[1]] = match[2];
    }
    return window.parsedSearch = ret;
  })();
  return parsedSearch[variable];
};

매개 변수없이 한 번만 호출하고 window.parsedSearch오브젝트에 대해 작업 하거나 getSearch후속 적으로 호출 할 수 있습니다 . 나는 이것을 완전히 테스트하지 않았으므로 정규 표현식에는 여전히 약간의 조정이 필요할 수 있습니다 ...

---

URL을 입력으로 사용하고 쿼리 매개 변수의 맵을 반환하는 간단한 함수를 원했습니다. 이 기능을 향상 시키려면 URL의 배열 데이터 표준 또는 중첩 변수를 지원합니다.

이것은 jQuery.param (qparams) 함수와 함께 작동합니다.

function getQueryParams(url){
    var qparams = {},
        parts = (url||'').split('?'),
        qparts, qpart,
        i=0;

    if(parts.length <= 1 ){
        return qparams;
    }else{
        qparts = parts[1].split('&');
        for(i in qparts){

            qpart = qparts[i].split('=');
            qparams[decodeURIComponent(qpart[0])] = 
                           decodeURIComponent(qpart[1] || '');
        }
    }

    return qparams;
};

---

이건 어때?

function getQueryVar(varName){
    // Grab and unescape the query string - appending an '&' keeps the RegExp simple
    // for the sake of this example.
    var queryStr = unescape(window.location.search) + '&';

    // Dynamic replacement RegExp
    var regex = new RegExp('.*?[&\\?]' + varName + '=(.*?)&.*');

    // Apply RegExp to the query string
    val = queryStr.replace(regex, "$1");

    // If the string is the same, we didn't find a match - return false
    return val == queryStr ? false : val;
}

.. 그냥 전화하십시오.

alert('Var "dest" = ' + getQueryVar('dest'));

건배

---

페이지의 DOM 요소 내 에서 특정 링크 를 선택하고 해당 사용자를 타이머의 리디렉션 페이지로 보낸 다음 원래 클릭 한 URL로 전달하고 싶습니다. 이것이 위의 방법 중 하나를 통합하는 일반 자바 스크립트를 사용하여 수행 한 방법입니다.

링크가있는 페이지 : 헤드

  function replaceLinks() {   
var content = document.getElementById('mainContent');
            var nodes = content.getElementsByTagName('a');
        for (var i = 0; i < document.getElementsByTagName('a').length; i++) {
            {
                href = nodes[i].href;
                if (href.indexOf("thisurl.com") != -1) {

                    nodes[i].href="http://www.thisurl.com/redirect.aspx" + "?url=" + nodes[i];
                    nodes[i].target="_blank";

                }
            }
    }
}

몸

<body onload="replaceLinks()">

리디렉션 페이지 헤드

   function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (decodeURIComponent(pair[0]) == variable) {
                return decodeURIComponent(pair[1]);
            }
        }
        console.log('Query variable %s not found', variable);
    }
    function delayer(){
        window.location = getQueryVariable('url')
    }

몸

<body onload="setTimeout('delayer()', 1000)">

---

이 솔루션을 살펴보십시오 . 그의 기능을 사용 gup('dest')하면 URL dest매개 변수 를 가져 오기 위해 호출하지 않습니다 .

참고 URL : https://stackoverflow.com/questions/2090551/parse-query-string-in-javascript