복붙노트

[JQUERY] 어떻게 추가하거나 쿼리 문자열 매개 변수를 업데이트 할 수 있습니다?

JQUERY

어떻게 추가하거나 쿼리 문자열 매개 변수를 업데이트 할 수 있습니다?

해결법

  1. 1.내가 무엇을 달성하고자 수행하는 다음 함수를 썼다 :

    내가 무엇을 달성하고자 수행하는 다음 함수를 썼다 :

    function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

  2. 2.나는 / / 업데이트를 대체 사용자 입력과 고려의 URL 앵커을 복용에 따라 쿼리 문자열 매개 변수를 제거 발견 서로 솔루션을 확장하고 결합했다.

    나는 / / 업데이트를 대체 사용자 입력과 고려의 URL 앵커을 복용에 따라 쿼리 문자열 매개 변수를 제거 발견 서로 솔루션을 확장하고 결합했다.

    값을 공급하지 않으면 하나의 매개 변수를 갱신 / 추가합니다 공급, 매개 변수를 제거합니다. 어떤 URL가 제공되지 않는 경우,에서는 window.location에서 잡고됩니다

    function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
        hash;

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null) {
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        } 
        else {
            hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                url += '#' + hash[1];
            }
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?';
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                url += '#' + hash[1];
            }
            return url;
        }
        else {
            return url;
        }
    }
}

    최신 정보

    쿼리 문자열의 첫 번째 매개 변수를 제거하는 버그가 발생했습니다, 나는 수정을 포함하도록 정규식 테스트를 재 작업했다.

    두 번째 업데이트

    @ JarónBarends에 의해 제안 - 비틀기 값 체크는 0 값을 설정 할 수 있도록 정의하고 널에 대해 확인

    세 번째 업데이트

    고정 된 해시 태그 기호를 잃게 해시 태그 전에 직접 쿼리 문자열 변수를 제거하는 버그가 있었다

    네 번째 업데이트

    덕분에 첫 번째 정규식 객체의 정규식 최적화를 지적 @rooby. 설정 초기 정규식으로 인해 사용에 문제에 ([? &])에 (\ |? &) @YonatanKarni에 의해 발견

    다섯 번째 업데이트

    경우에 선언 해시 VAR 제거 / else 문을

  3. 3.업데이트 (2020) : URLSearchParams 이제 모든 현대적인 브라우저에서 지원됩니다.

    업데이트 (2020) : URLSearchParams 이제 모든 현대적인 브라우저에서 지원됩니다.

    URLSearchParams 유틸리티는 window.location.search와 함께이 유용 할 수 있습니다. 예를 들면 :

    if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("foo", "bar");
    window.location.search = searchParams.toString();
}

    이제 foo는 상관없이 이미 존재 여부 바 설정되어 있습니다.

    그러나 window.location.search에 위의 할당은 다음과 같이 그 바람직한 사용은 역사의 API가 아니다 그렇다면, 페이지로드가 발생합니다 :

    if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search)
    searchParams.set("foo", "bar");
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);
}

    지금 당신은 쿼리 문자열의 존재 가능성을 처리하기 위해 자신의 정규 표현식 또는 논리를 작성할 필요가 없습니다.

    가 크롬, 파이어 폭스, 사파리, 아이폰 OS 사파리, 안드로이드 브라우저, 안드로이드 크롬과 오페라의 최신 버전에서 현재 실험 만 사용이다 그러나, 브라우저 지원이 좋지 않습니다. polyfill로 사용 당신이 그것을 사용하기로 결정합니다.

  4. 4.@ 아마추어의 답변에 따라 (지금 @j_walker_dev 코멘트에서 수정을 포함), 그러나 계정으로 나는 다음을 사용하는 URL에서 해시 태그에 대한 설명을 복용 :

    @ 아마추어의 답변에 따라 (지금 @j_walker_dev 코멘트에서 수정을 포함), 그러나 계정으로 나는 다음을 사용하는 URL에서 해시 태그에 대한 설명을 복용 :

    function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
}

    수정에 수정 됨 [|? &] 정규식에 당연히 있어야하는 코멘트에 뾰족한 아웃으로 [&?]

    편집 : 대체 버전이 아니라 URL의 PARAMS을 제거 지원합니다. 나는 제거를 표시하는 방법으로 정의되지 않은 사용되는 값을 === 있습니다. 값 === 허위 또는 원하는대로 심지어 별도의 입력 PARAM을 사용할 수 있습니다.

    function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if( value === undefined ) {
    if (uri.match(re)) {
        return uri.replace(re, '$1$2');
    } else {
        return uri;
    }
  } else {
    if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
  }  
}

    https://jsfiddle.net/bp3tmuxh/1/에서 직접보기

  5. 5.여기에 그렇게 내 라이브러리는 다음과 같습니다 https://github.com/Mikhus/jsurl

    여기에 그렇게 내 라이브러리는 다음과 같습니다 https://github.com/Mikhus/jsurl

    var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)

  6. 6.이 질문은 오래과 죽음에 대한 답이 실현,하지만 여기 내 찌르고 그것을이다. 나는 현재 허용 대답을 사용했기 때문에 여기에 바퀴를 재발견하기 위해 노력하고, 최근 프로젝트에서 나를 비트 URL 조각을 잘못 취급하고 있습니다.

    이 질문은 오래과 죽음에 대한 답이 실현,하지만 여기 내 찌르고 그것을이다. 나는 현재 허용 대답을 사용했기 때문에 여기에 바퀴를 재발견하기 위해 노력하고, 최근 프로젝트에서 나를 비트 URL 조각을 잘못 취급하고 있습니다.

    기능은 아래와 같다. 그것은 아주 긴하지만 그것은 가능한 탄력적하기로 결정했습니다. 나는 그것을 개선 / 단축을위한 제안을 사랑하는 것입니다. 나는 그것을 (또는 다른 유사한 기능) 함께 작은 jsFiddle 테스트 스위트를 넣어. 함수가 테스트의 모든 하나를 통과 할 수 있다면, 나는 그것을 가고 아마 좋은 말한다.

    업데이트 : 여기에 기술을 통합, 그래서 나는, 구문 분석 URL에 DOM을 사용하는 멋진 기능을 가로 질러왔다. 이 기능 짧고 더 신뢰할 수 있습니다. 그 함수의 저자에 소품.

    /**
 * Add or update a query string parameter. If no URI is given, we use the current
 * window.location.href value for the URI.
 * 
 * Based on the DOM URL parser described here:
 * http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
 *
 * @param   (string)    uri     Optional: The URI to add or update a parameter in
 * @param   (string)    key     The key to add or update
 * @param   (string)    value   The new value to set for key
 *
 * Tested on Chrome 34, Firefox 29, IE 7 and 11
 */
function update_query_string( uri, key, value ) {

    // Use window URL if no query string is provided
    if ( ! uri ) { uri = window.location.href; }

    // Create a dummy element to parse the URI with
    var a = document.createElement( 'a' ), 

        // match the key, optional square brackets, an equals sign or end of string, the optional value
        reg_ex = new RegExp( key + '((?:\\[[^\\]]*\\])?)(=|$)(.*)' ),

        // Setup some additional variables
        qs,
        qs_len,
        key_found = false;

    // Use the JS API to parse the URI 
    a.href = uri;

    // If the URI doesn't have a query string, add it and return
    if ( ! a.search ) {

        a.search = '?' + key + '=' + value;

        return a.href;
    }

    // Split the query string by ampersands
    qs = a.search.replace( /^\?/, '' ).split( /&(?:amp;)?/ );
    qs_len = qs.length; 

    // Loop through each query string part
    while ( qs_len > 0 ) {

        qs_len--;

        // Remove empty elements to prevent double ampersands
        if ( ! qs[qs_len] ) { qs.splice(qs_len, 1); continue; }

        // Check if the current part matches our key
        if ( reg_ex.test( qs[qs_len] ) ) {

            // Replace the current value
            qs[qs_len] = qs[qs_len].replace( reg_ex, key + '$1' ) + '=' + value;

            key_found = true;
        }
    }   

    // If we haven't replaced any occurrences above, add the new parameter and value
    if ( ! key_found ) { qs.push( key + '=' + value ); }

    // Set the new query string
    a.search = '?' + qs.join( '&' );

    return a.href;
}

  7. 7.window.location.search는 읽기 / 쓰기.

    window.location.search는 읽기 / 쓰기.

    그러나 - 쿼리 문자열을 수정하면과 서버에서 새로 고침 원인이있는 페이지를 리디렉션합니다.

    당신이해야 할 시도하는 것은 클라이언트 측 상태를 유지 (그리고 잠재적으로는 즐겨 찾기에-수 있도록) 인 경우, 같은 페이지 (에서는 window.location에 당신을 계속 쿼리 문자열, 대신 URL 해시를 수정할 수 있습니다. 해시) 읽기 / 쓰기입니다. 이 twitter.com 같은 웹 사이트가이 작업을 수행하는 방법이다.

    또한 작업에 뒤로 버튼을 할 것입니다, 당신은 해시 변경 이벤트에 자바 스크립트 이벤트를 바인딩해야합니다, 그것을위한 좋은 플러그인 http://benalman.com/projects/jquery-hashchange-plugin/입니다

  8. 8.이 새 값으로 업데이트하도록 설정하거나 싶지 않다면 당신은 사용할 수 있습니다 :

    이 새 값으로 업데이트하도록 설정하거나 싶지 않다면 당신은 사용할 수 있습니다 :

    window.location.search = 'param=value'; // or param=new_value

    이 방법에 의해, 간단한 자바 스크립트입니다.

    편집하다

    당신은 JQuery와 쿼리 개체 플러그인을 사용하여 시도 할 수 있습니다

  9. 9.여기 내 방식이다 (아래 그림 참조) () 함수는 게터 또는 세터로 사용할 수있는 location.params. 예를 들면 :

    여기 내 방식이다 (아래 그림 참조) () 함수는 게터 또는 세터로 사용할 수있는 location.params. 예를 들면 :

    URL이 주어 http://example.com/?foo=bar&baz#some-hash,

    여기서 임의로에서는 window.location 객체에 할당 될 수 PARAMS () 함수이다.

    location.params = function(params) {
  var obj = {}, i, parts, len, key, value;

  if (typeof params === 'string') {
    value = location.search.match(new RegExp('[?&]' + params + '=?([^&]*)[&#$]?'));
    return value ? value[1] : undefined;
  }

  var _params = location.search.substr(1).split('&');

  for (i = 0, len = _params.length; i < len; i++) {
    parts = _params[i].split('=');
    if (! parts[0]) {continue;}
    obj[parts[0]] = parts[1] || true;
  }

  if (typeof params !== 'object') {return obj;}

  for (key in params) {
    value = params[key];
    if (typeof value === 'undefined') {
      delete obj[key];
    } else {
      obj[key] = value;
    }
  }

  parts = [];
  for (key in obj) {
    parts.push(key + (obj[key] === true ? '' : '=' + obj[key]));
  }

  location.search = parts.join('&');
};

  10. 10.이것은 내 취향이며, 그것은 내가 생각할 수있는 경우를 포함한다. 사람이 대신 단일로 줄일 수있는 방법을 생각할 수 있는가?

    이것은 내 취향이며, 그것은 내가 생각할 수있는 경우를 포함한다. 사람이 대신 단일로 줄일 수있는 방법을 생각할 수 있는가?

    function setParam(uri, key, val) {
    return uri
        .replace(RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
        .replace(/^([^?&]+)&/, "$1?");
}

  11. 11.나는이 꽤 오래 알고하지만 난 여기에 화재에 내 작업 버전을 원한다.

    나는이 꽤 오래 알고하지만 난 여기에 화재에 내 작업 버전을 원한다.

    addOrUpdateUrlParam 기능 (URI, paramKey, paramVal) { VAR 다시 새로운 정규 표현식 = ( "[? b]) ("+ paramKey + "= ^ & # *", "I"); 경우 (re.test (URI)) { URI = uri.replace (재 '$ 1'+ paramKey + "="+ paramVal); } 다른 { VAR 세퍼레이터 = /\?/.test(uri)? "&", "?" URI = URI + 분리기 + paramKey + "="+ paramVal; } URI를 반환; } jQuery를 (문서) .ready (함수 ($) { $ ( '# paramKey, # paramValue'). ( '변화', 기능에 대한 () { ($ ( '# paramKey'). 발 ()! = ""&& $ ( '# paramValue'). 발 ()! = "")의 경우 { $ ( '#의 URI') 발 (addOrUpdateUrlParam ($ ( '#의 URI') 발 (), $ ( '# paramKey') 발 (), $ ( '# paramValue') 발 ())...).; } }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <레이블 스타일 = "디스플레이 : 블록;"> paramKey <레이블 스타일 = "디스플레이 : 블록;"> paramValue

    참고이 @elreimundo의 수정 된 버전입니다

  12. 12.여기에서 필자 (와 호환 "엄격한 사용"; 정말 jQuery를 사용하지 않습니다)

    여기에서 필자 (와 호환 "엄격한 사용"; 정말 jQuery를 사용하지 않습니다)

    function decodeURIParams(query) {
  if (query == null)
    query = window.location.search;
  if (query[0] == '?')
    query = query.substring(1);

  var params = query.split('&');
  var result = {};
  for (var i = 0; i < params.length; i++) {
    var param = params[i];
    var pos = param.indexOf('=');
    if (pos >= 0) {
        var key = decodeURIComponent(param.substring(0, pos));
        var val = decodeURIComponent(param.substring(pos + 1));
        result[key] = val;
    } else {
        var key = decodeURIComponent(param);
        result[key] = true;
    }
  }
  return result;
}

function encodeURIParams(params, addQuestionMark) {
  var pairs = [];
  for (var key in params) if (params.hasOwnProperty(key)) {
    var value = params[key];
    if (value != null) /* matches null and undefined */ {
      pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
    }
  }
  if (pairs.length == 0)
    return '';
  return (addQuestionMark ? '?' : '') + pairs.join('&');
}

//// alternative to $.extend if not using jQuery:
// function mergeObjects(destination, source) {
//   for (var key in source) if (source.hasOwnProperty(key)) {
//     destination[key] = source[key];
//   }
//   return destination;
// }

function navigateWithURIParams(newParams) {
  window.location.search = encodeURIParams($.extend(decodeURIParams(), newParams), true);
}

    사용 예제 :

    // add/update parameters
navigateWithURIParams({ foo: 'bar', boz: 42 });

// remove parameter
navigateWithURIParams({ foo: null });

// submit the given form by adding/replacing URI parameters (with jQuery)
$('.filter-form').submit(function(e) {
  e.preventDefault();
  navigateWithURIParams(decodeURIParams($(this).serialize()));
});

  13. 13.준 @ellemayo 대답을 바탕으로, 내가 원하는 경우 해시 태그의 사용 불가능을 가능하게 다음과 같은 솔루션을 함께했다 :

    준 @ellemayo 대답을 바탕으로, 내가 원하는 경우 해시 태그의 사용 불가능을 가능하게 다음과 같은 솔루션을 함께했다 :

    function updateQueryString(key, value, options) {
    if (!options) options = {};

    var url = options.url || location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash;

    hash = url.split('#');
    url = hash[0];
    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null) {
            url = url.replace(re, '$1' + key + "=" + value + '$2$3');
        } else {
            url = url.replace(re, '$1$3').replace(/(&|\?)$/, '');
        }
    } else if (typeof value !== 'undefined' && value !== null) {
        var separator = url.indexOf('?') !== -1 ? '&' : '?';
        url = url + separator + key + '=' + value;
    }

    if ((typeof options.hash === 'undefined' || options.hash) &&
        typeof hash[1] !== 'undefined' && hash[1] !== null)
        url += '#' + hash[1];
    return url;
}

    이처럼 전화 :

    updateQueryString('foo', 'bar', {
    url: 'http://my.example.com#hash',
    hash: false
});

    결과 :

    http://my.example.com?foo=bar

  14. 14.여기 돌봐 짧은 버전입니다

    여기 돌봐 짧은 버전입니다

    암호:

    var setQueryParameter = function(uri, key, value) {
  var re = new RegExp("([?&])("+ key + "=)[^&#]*", "g");
  if (uri.match(re)) 
    return uri.replace(re, '$1$2' + value);

  // need to add parameter to URI
  var paramString = (uri.indexOf('?') < 0 ? "?" : "&") + key + "=" + value;
  var hashIndex = uri.indexOf('#');
  if (hashIndex < 0)
    return uri + paramString;
  else
    return uri.substring(0, hashIndex) + paramString + uri.substring(hashIndex);
}

    정규식 설명은 여기에서 찾을 수 있습니다.

    참고 :이 솔루션은 @amateur 대답에, 그러나 많은 개선을 기반으로합니다.

  15. 15.ES6 및 jQuery를 사용하여 기존 URL에 매개 변수 목록을 추가 코드 :

    ES6 및 jQuery를 사용하여 기존 URL에 매개 변수 목록을 추가 코드 :

    class UrlBuilder {
    static appendParametersToUrl(baseUrl, listOfParams) {

        if (jQuery.isEmptyObject(listOfParams)) {
            return baseUrl;
        }

        const newParams = jQuery.param(listOfParams);

        let partsWithHash = baseUrl.split('#');
        let partsWithParams = partsWithHash[0].split('?');

        let previousParams = '?' + ((partsWithParams.length === 2) ? partsWithParams[1] + '&' : '');
        let previousHash = (partsWithHash.length === 2) ? '#' + partsWithHash[1] : '';

        return partsWithParams[0] + previousParams + newParams + previousHash;
    }
}

    어디 listOfParams이 같다

    const listOfParams = {
    'name_1': 'value_1',
    'name_2': 'value_2',
    'name_N': 'value_N',
};

    사용의 예 :

        UrlBuilder.appendParametersToUrl(urlBase, listOfParams);

    빠른 검사 :

        url = 'http://hello.world';
    console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
    // Output:  http://hello.world

    url = 'http://hello.world#h1';
    console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
    // Output:  http://hello.world#h1

    url = 'http://hello.world';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p1=v1&p2=v2

    url = 'http://hello.world?p0=v0';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p0=v0&p1=v1&p2=v2

    url = 'http://hello.world#h1';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
   // Output: http://hello.world?p1=v1&p2=v2#h1

    url = 'http://hello.world?p0=v0#h1';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p0=v0&p1=v1&p2=v2#h1

  16. 16.정규 표현식을 사용하지 않고 다른 방법. 지원하는 '해시'의 URL뿐만 아니라 여러 물음표 charcters의 끝에 앵커 (?). 약간 빠른 정규 표현식 접근보다는이어야한다.

    정규 표현식을 사용하지 않고 다른 방법. 지원하는 '해시'의 URL뿐만 아니라 여러 물음표 charcters의 끝에 앵커 (?). 약간 빠른 정규 표현식 접근보다는이어야한다.

    function setUrlParameter(url, key, value) {
  var parts = url.split("#", 2), anchor = parts.length > 1 ? "#" + parts[1] : '';
  var query = (url = parts[0]).split("?", 2);
  if (query.length === 1) 
    return url + "?" + key + "=" + value + anchor;

  for (var params = query[query.length - 1].split("&"), i = 0; i < params.length; i++)
    if (params[i].toLowerCase().startsWith(key.toLowerCase() + "="))
      return params[i] = key + "=" + value, query[query.length - 1] = params.join("&"), query.join("?") + anchor;

  return url + "&" + key + "=" + value + anchor
}

  17. 17.JQuery와에 따라 URL에서 쿼리 문자열 매개 변수를 추가, 삭제 및 수정이 기능을 사용하여

    JQuery와에 따라 URL에서 쿼리 문자열 매개 변수를 추가, 삭제 및 수정이 기능을 사용하여

    /**
@param String url
@param object param {key: value} query parameter
*/
function modifyURLQuery(url, param){
    var value = {};

    var query = String(url).split('?');

    if (query[1]) {
        var part = query[1].split('&');

        for (i = 0; i < part.length; i++) {
            var data = part[i].split('=');

            if (data[0] && data[1]) {
                value[data[0]] = data[1];
            }
        }
    }

    value = $.extend(value, param);

    // Remove empty value
    for (i in value){
        if(!value[i]){
            delete value[i];
        }
    }

    // Return url with modified parameter
    if(value){
        return query[0] + '?' + $.param(value);
    } else {
        return query[0];
    }
}

    새로운 추가하고 URL을 기존 매개 변수를 수정

    var new_url = modifyURLQuery("http://google.com?foo=34", {foo: 50, bar: 45});
// Result: http://google.com?foo=50&bar=45

    기존의 제거

    var new_url = modifyURLQuery("http://google.com?foo=50&bar=45", {bar: null});
// Result: http://google.com?foo=50

  18. 18.jQuery를 사용하여 우리는 아래와 같이 할 수있다

    jQuery를 사용하여 우리는 아래와 같이 할 수있다

    var query_object = $.query_string;
query_object["KEY"] = "VALUE";
var new_url = window.location.pathname + '?'+$.param(query_object)

    변수 NEW_URL에서 우리는 새로운 쿼리 매개 변수가됩니다.

    참조 : http://api.jquery.com/jquery.param/

  19. 19.갈과 tradyblix에 의해 제안 window.location.search 수정에 대한 코드 예제를 제공합니다 :

    갈과 tradyblix에 의해 제안 window.location.search 수정에 대한 코드 예제를 제공합니다 :

    var qs = window.location.search || "?";
var param = key + "=" + value; // remember to URI encode your parameters
if (qs.length > 1) {
    // more than just the question mark, so append with ampersand
    qs = qs + "&";
}
qs = qs + param;
window.location.search = qs;

  20. 20.자바 스크립트 코드는 특정 쿼리 문자열을 찾아 그 값을 대체하는 *

    자바 스크립트 코드는 특정 쿼리 문자열을 찾아 그 값을 대체하는 *

    ('input.letter').click(function () {
                //0- prepare values
                var qsTargeted = 'letter=' + this.value; //"letter=A";
                var windowUrl = '';
                var qskey = qsTargeted.split('=')[0];
                var qsvalue = qsTargeted.split('=')[1];
                //1- get row url
                var originalURL = window.location.href;
                //2- get query string part, and url
                if (originalURL.split('?').length > 1) //qs is exists
                {
                    windowUrl = originalURL.split('?')[0];
                    var qs = originalURL.split('?')[1];
                    //3- get list of query strings
                    var qsArray = qs.split('&');
                    var flag = false;
                    //4- try to find query string key
                    for (var i = 0; i < qsArray.length; i++) {
                        if (qsArray[i].split('=').length > 0) {
                            if (qskey == qsArray[i].split('=')[0]) {
                                //exists key
                                qsArray[i] = qskey + '=' + qsvalue;
                                flag = true;
                                break;
                            }
                        }
                    }
                    if (!flag)//   //5- if exists modify,else add
                    {
                        qsArray.push(qsTargeted);
                    }
                    var finalQs = qsArray.join('&');
                    //6- prepare final url
                    window.location = windowUrl + '?' + finalQs;
                }
                else {
                    //6- prepare final url
                    //add query string
                    window.location = originalURL + '?' + qsTargeted;
                }
            })
        });

  21. 21.여기에 앵커 HTML 요소의 붙박이 속성을 사용하는 다른 방법입니다 :

    여기에 앵커 HTML 요소의 붙박이 속성을 사용하는 다른 방법입니다 :

    VAR A = document.createElement ( 'A'), getHrefWithUpdatedQueryString = 함수 (PARAM, 값) { 창 updatedQueryString (window.location.href, PARAM, 값); }, updatedQueryString = 함수 (URL, PARAM, 값) { / * 쿼리 문자열을 수정하는 기능 단일 값을 하나 개의 파라미터를 설정함으로써. 매개 변수의 다른 인스턴스는 교체 / 제거됩니다. * / VAR = 단편에 encodeURIComponent (PARAM) + '='+에 encodeURIComponent (값); a.href = URL; 경우 (a.search.length === 0) { a.search = '?' + 단편; } 다른 { VAR didReplace = 거짓, // 선두 제거 '?' 부품 = a.search.substring (1) 조각으로 // 브레이크 .스플릿('&'), 다시 조립 = [], LEN = parts.length; 위한 VAR (I = 0; I는 <렌; 나는 ++) { VAR 조각 부품 = [I] .split ( '='); 경우 (부분 [0] === PARAM) { 만약 (! didReplace) { ( '&'+ 단편) reassemble.push; didReplace 사실 =; } } 다른 { reassemble.push (부 [I]); } } 만약 (! didReplace) { ( '&'+ 단편) reassemble.push; } a.search reassemble.join = ( '&'); } a.href 반환; };

  22. 22.한 번에 여러 매개 변수를 설정하려면 :

    한 번에 여러 매개 변수를 설정하려면 :

    function updateQueryStringParameters(uri, params) {
    for(key in params){
      var value = params[key],
          re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
          separator = uri.indexOf('?') !== -1 ? "&" : "?";
      if (uri.match(re)) {
        uri = uri.replace(re, '$1' + key + "=" + value + '$2');
      }
      else {
        uri = uri + separator + key + "=" + value;
      }
    }
    return uri;
}

    같은 기능 @ 아마추어의

    jslint 당신에게 오류를 제공하면 for 루프 후이 추가

    if(params.hasOwnProperty(key))

  23. 23.이 페이지에 어색하고 불필요하게 복잡 답변이 많이 있습니다. 최고는 아마추어의 @ 한 평가는 정규식에서 불필요한 보풀의 비트를 가지고 있지만, 매우 좋다. 여기 청소기 정규식에 조금 더 최적의 솔루션 및 전화로 교체 청소기입니다 :

    이 페이지에 어색하고 불필요하게 복잡 답변이 많이 있습니다. 최고는 아마추어의 @ 한 평가는 정규식에서 불필요한 보풀의 비트를 가지고 있지만, 매우 좋다. 여기 청소기 정규식에 조금 더 최적의 솔루션 및 전화로 교체 청소기입니다 :

    function updateQueryStringParamsNoHash(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&]*", "i");
  return re.test(uri)
       ? uri.replace(re, '$1' + key + "=" + value)
       : uri + separator + key + "=" + value
  ;
}

    추가 보너스로, URI 문자열이 아닌 경우, 당신은 일치를 호출하거나 그 메소드를 구현하지 않을 수 있습니다 뭔가 대체하려고에 대한 오류를받지 않습니다.

    당신이 (당신은 이미 올바른 형식의 HTML에 대한 검사를 수행 한) 해시의 경우를 처리하려는 경우, 당신은 대신에 동일한 로직을 포함하는 새로운 기능을 작성하는 기존의 기능을 활용할 수 있습니다 :

    function updateQueryStringParams(url, key, value) {
    var splitURL = url.split('#');
    var hash = splitURL[1];
    var uri = updateQueryStringParamsNoHash(splitURL[0]);
    return hash == null ? uri : uri + '#' + hash;
}

    또는 당신은 @ 아담의 다른 훌륭한 대답에 약간의 변경을 할 수 있습니다 :

    function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&#]*", "i");
  if (re.test(uri)) {
    return uri.replace(re, '$1' + key + "=" + value);
  } else {
    var matchData = uri.match(/^([^#]*)(#.*)?$/);
    var separator = /\?/.test(uri) ? "&" : "?";    
    return matchData[0] + separator + key + "=" + value + (matchData[1] || '');
  }
}

  24. 24.이 목적을 봉사해야한다 :

    이 목적을 봉사해야한다 :

    function updateQueryString(url, key, value) {
    var arr =  url.split("#");
    var url = arr[0];
    var fragmentId = arr[1];
    var updatedQS = "";
    if (url.indexOf("?") == -1) {
        updatedQS = encodeURIComponent(key) + "=" + encodeURIComponent(value);
    }
    else {
        updatedQS = addOrModifyQS(url.substring(url.indexOf("?") + 1), key, value); 
    }
    url = url.substring(0, url.indexOf("?")) + "?" + updatedQS;
    if (typeof fragmentId !== 'undefined') {
        url = url + "#" + fragmentId;
    }
    return url;
}

function addOrModifyQS(queryStrings, key, value) {
    var oldQueryStrings = queryStrings.split("&");
    var newQueryStrings = new Array();
    var isNewKey = true;
    for (var i in oldQueryStrings) {
        var currItem = oldQueryStrings[i];
        var searchKey = key + "=";
        if (currItem.indexOf(searchKey) != -1) {
            currItem = encodeURIComponent(key) + "=" + encodeURIComponent(value);
            isNewKey = false;
        }
        newQueryStrings.push(currItem);
    }
    if (isNewKey) {
        newQueryStrings.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
    }
    return newQueryStrings.join("&");
}

  25. 25.그것은 모든 최신 브라우저 (caniuse)에서 지원, URLSearchParams 너무 간단합니다.

    그것은 모든 최신 브라우저 (caniuse)에서 지원, URLSearchParams 너무 간단합니다.

    ) (P = 새로운 URLSearchParams하자; p.set ( "foo는", "바"); p.set ( "이름", "잭 & 질?"); 을 console.log ( "http://example.com/?"+ p.toString ());

    기존 URL을 수정하려면이 같은 오브젝트를 구축 : 새로운 URLSearchParams (window.location.search를) 및 window.location.search 할 문자열을 지정합니다.

  26. 26.여기에 운동으로 작성이 나의 약간 다른 접근 방식이다

    여기에 운동으로 작성이 나의 약간 다른 접근 방식이다

    function addOrChangeParameters( url, params )
{
  let splitParams = {};
  let splitPath = (/(.*)[?](.*)/).exec(url);
  if ( splitPath && splitPath[2] )
    splitPath[2].split("&").forEach( k => { let d = k.split("="); splitParams[d[0]] = d[1]; } );
  let newParams = Object.assign( splitParams, params );
  let finalParams = Object.keys(newParams).map( (a) => a+"="+newParams[a] ).join("&");
  return splitPath ? (splitPath[1] + "?" + finalParams) : (url + "?" + finalParams);
}

    용법:

    const url = "http://testing.com/path?empty&value1=test&id=3";

addOrChangeParameters( url, {value1:1, empty:"empty", new:0} )

"http://testing.com/path?empty=empty&value1=1&id=3&new=0"

  27. 27.그래, 난 내 쿼리 문자열이 오버 플로우 및 중복 않는 문제가 있었다, 그러나 이것은 내 자신의 부진 때문이었다. 그래서 나는 조금 연주와 일부 JS JQuery와 (actualy 지글 지글) 및 C #의 마술 (magick)을했다.

    그래, 난 내 쿼리 문자열이 오버 플로우 및 중복 않는 문제가 있었다, 그러나 이것은 내 자신의 부진 때문이었다. 그래서 나는 조금 연주와 일부 JS JQuery와 (actualy 지글 지글) 및 C #의 마술 (magick)을했다.

    난 그냥 서버가 전달 된 값으로 수행 한 후, 값이 더 재사용 클라이언트가 분명 같은 일을하고 싶었 경우 항상 경우에도 새로운 요청 될 것 없다, 더 이상 중요하지 않습니다 것을 깨달았다 그래서 그것 동일한 파라미터가 전달된다. 그리고 모든 클라이언트 측 먹으 렴, 일부 캐시 / 쿠키 등 그래서 안부 멋진 될 수 있습니다.

    JS :

    $(document).ready(function () {
            $('#ser').click(function () {
                SerializeIT();
            });
            function SerializeIT() {
                var baseUrl = "";
                baseUrl = getBaseUrlFromBrowserUrl(window.location.toString());
                var myQueryString = "";
                funkyMethodChangingStuff(); //whatever else before serializing and creating the querystring
                myQueryString = $('#fr2').serialize();
                window.location.replace(baseUrl + "?" + myQueryString);
            }
            function getBaseUrlFromBrowserUrl(szurl) {
                return szurl.split("?")[0];
            } 
            function funkyMethodChangingStuff(){
               //do stuff to whatever is in fr2
            }
        });

    HTML :

    <div id="fr2">
   <input type="text" name="qURL" value="http://somewhere.com" />
   <input type="text" name="qSPart" value="someSearchPattern" />
</div>
<button id="ser">Serialize! and go play with the server.</button>

    씨#:

        using System.Web;
    using System.Text;
    using System.Collections.Specialized;

    public partial class SomeCoolWebApp : System.Web.UI.Page
    {
        string weburl = string.Empty;
        string partName = string.Empty;

        protected void Page_Load(object sender, EventArgs e)
        {
            string loadurl = HttpContext.Current.Request.RawUrl;
            string querySZ = null;
            int isQuery = loadurl.IndexOf('?');
            if (isQuery == -1) { 
                //If There Was no Query
            }
            else if (isQuery >= 1) {
                querySZ = (isQuery < loadurl.Length - 1) ? loadurl.Substring(isQuery + 1) : string.Empty;
                string[] getSingleQuery = querySZ.Split('?');
                querySZ = getSingleQuery[0];

                NameValueCollection qs = null;
                qs = HttpUtility.ParseQueryString(querySZ);

                weburl = qs["qURL"];
                partName = qs["qSPart"];
                //call some great method thisPageRocks(weburl,partName); or whatever.
          }
      }
  }

    28. from https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 - $ (문서) .ready와 $ (창) .load 사이의 차이점은 무엇입니까?  (0) 2020.09.27
[JQUERY] jQuery로 요소 클래스의 목록을 가져옵니다  (0) 2020.09.27
[JQUERY] 수동 catch되지 않은 TypeErrors에서 PrimeFaces 결과로 / 로딩 jQuery를 추가  (0) 2020.09.26
[JQUERY] jQuery를 아이디 선택은 첫 번째 요소에 대해서만 작동합니다  (0) 2020.09.26
[JQUERY] 페이지에서 파일을 삭제하면 어떻게 파일의 입력 값을 설정하는 방법? [복제]  (0) 2020.09.26
,

티스토리툴바