JavaScript를 사용하여 URL 매개 변수 변경 및 기본값 지정

JavaScript를 사용하여 URL 매개 변수 변경 및 기본값 지정

다음 URL이 있습니다.

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc

제가 필요한 것은 'rows' url param 값을 제가 지정한 값으로 변경할 수 있는 것입니다. 예를 들어 10입니다.그리고 'rows'가 존재하지 않는 경우 URL 끝에 추가하여 이미 지정한 값을 추가해야 합니다(10).

함수를 구성하기 위해 Sujoy의 코드를 확장했습니다.

/**
 * http://stackoverflow.com/a/10997390/11236
 */
function updateURLParameter(url, param, paramVal){
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

함수 호출:

var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
newURL = updateURLParameter(newURL, 'resId', 'newResId');

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

URL의 앵커도 관리하는 업데이트 버전입니다.

function updateURLParameter(url, param, paramVal)
{
    var TheAnchor = null;
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";

    if (additionalURL) 
    {
        var tmpAnchor = additionalURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor = tmpAnchor[1];
        if(TheAnchor)
            additionalURL = TheParams;

        tempArray = additionalURL.split("&");

        for (var i=0; i<tempArray.length; i++)
        {
            if(tempArray[i].split('=')[0] != param)
            {
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }        
    }
    else
    {
        var tmpAnchor = baseURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor  = tmpAnchor[1];

        if(TheParams)
            baseURL = TheParams;
    }

    if(TheAnchor)
        paramVal += "#" + TheAnchor;

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

당신은 쿼리 플러그인을 원하는 것 같습니다.

예:

window.location.search = jQuery.query.set("rows", 10);

이것은 행의 현재 상태에 관계없이 작동합니다.

순수 js의 빠르고 작은 솔루션. 플러그인이 필요 없습니다.

function replaceQueryParam(param, newval, search) {
    var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
    var query = search.replace(regex, "$1").replace(/&$/, '');

    return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}

이렇게 불러주세요.

 window.location = '/mypage' + replaceQueryParam('rows', 55, window.location.search)

또는 같은 페이지를 유지하여 여러 개의 매개 변수를 바꾸려면 다음 절차를 수행합니다.

 var str = window.location.search
 str = replaceQueryParam('rows', 55, str)
 str = replaceQueryParam('cols', 'no', str)
 window.location = window.location.pathname + str

Luke: 하려면 pass를 합니다.false ""null값은 다음과 같습니다.replaceQueryParam('rows', false, params) .부터0 또한 거짓입니다. 지정'0'.

많은 것을 배운 후 4년 후에 제 자신의 질문에 답하기 위해서.특히 모든 일에 jQuery를 사용해서는 안 된다고.쿼리 문자열을 해석/문자열화할 수 있는 간단한 모듈을 만들었습니다.이를 통해 쿼리 문자열을 쉽게 수정할 수 있습니다.

다음과 같이 query-string을 사용할 수 있습니다.

// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);

이에 대한 현대적인 접근법은 네이티브 표준 기반의 URLearch Params를 사용하는 것입니다.폴리필이 가능한 IE를 제외한 모든 주요 브라우저에서 지원됩니다.

const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);
console.log(searchParams.toString()); // return modified string.

Ben Alman은 여기에 쿼리 스트링/url 플러그인이 있어 쿼리 스트링을 쉽게 조작할 수 있습니다.

요청하신 대로 -

그의 테스트 페이지를 여기에 놓아라.

firebug에서 콘솔에 다음을 입력합니다.

jQuery.param.querystring(window.location.href, 'a=3&newValue=100');

다음과 같은 수정된 URL 문자열이 반환됩니다.

http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=3

의 querystring 값이 X에서3으로 변경되어 새로운 값이 추가되었습니다.

그런 다음 새 URL 문자열을 사용할 수 있습니다. 예를 들어 document.location = newUrl을 사용하거나 앵커 링크를 변경하는 등

URL 파라미터를 변경하는 최신 방법은 다음과 같습니다.

function setGetParam(key,value) {
  if (history.pushState) {
    var params = new URLSearchParams(window.location.search);
    params.set(key, value);
    var newUrl = window.location.origin 
          + window.location.pathname 
          + '?' + params.toString();
    window.history.pushState({path:newUrl},'',newUrl);
  }
}

일반 JS를 통해서도 할 수 있습니다.

var url = document.URL
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var aditionalURL = tempArray[1]; 
var temp = "";
if(aditionalURL)
{
var tempArray = aditionalURL.split("&");
for ( var i in tempArray ){
    if(tempArray[i].indexOf("rows") == -1){
            newAdditionalURL += temp+tempArray[i];
                temp = "&";
            }
        }
}
var rows_txt = temp+"rows=10";
var finalURL = baseURL+"?"+newAdditionalURL+rows_txt;

URLearchParams를 사용하여check,get ★★★★★★★★★★★★★★★★★」set을 「」로 합니다.URL

다음으로 현재 URL을 취득하여 필요에 따라 새로운 파라미터를 설정하고 URL을 갱신하거나 페이지를 새로고침하는 예를 나타냅니다.

var rows = 5; // value that you want to set
var url = new URL(window.location);
(url.searchParams.has('rows') ? url.searchParams.set('rows', rows) : url.searchParams.append('rows', rows));

url.search = url.searchParams;
url        = url.toString();

// if you want to append into URL without reloading the page
history.pushState({}, null, url);

// want to reload the window with a new param
window.location = url;

2020 솔루션: 합격 시 변수 설정 또는 제거null ""undefined치를높높 높높높다다

var setSearchParam = function(key, value) {
    if (!window.history.pushState) {
        return;
    }

    if (!key) {
        return;
    }

    var url = new URL(window.location.href);
    var params = new window.URLSearchParams(window.location.search);
    if (value === undefined || value === null) {
        params.delete(key);
    } else {
        params.set(key, value);
    }

    url.search = params;
    url = url.toString();
    window.history.replaceState({url: url}, null, url);
}

String 실행 한 대체 방법은 html을 입니까?form요.rows요??

★★★★★★★★★★★★★★★★.html 셈이 되다

<form id='myForm' target='site.fwx'>
    <input type='hidden' name='position' value='1'/>
    <input type='hidden' name='archiveid' value='5000'/>
    <input type='hidden' name='columns' value='5'/>
    <input type='hidden' name='rows' value='20'/>
    <input type='hidden' name='sorting' value='ModifiedTimeAsc'/>
</form>

다음 JavaScript를 사용하여 폼을 제출합니다.

var myForm = document.getElementById('myForm');
myForm.rows.value = yourNewValue;
myForm.submit();

모든 상황에 적합한 것은 아니지만 URL 문자열을 해석하는 것보다 좋을 수 있습니다.

URL 쿼리 파라미터는 URLearchParams 및 History 인터페이스를 사용하여 쉽게 변경할 수 있습니다.

// Construct URLSearchParams object instance from current URL querystring.
var queryParams = new URLSearchParams(window.location.search);
 
// Set new or modify existing parameter value. 
//queryParams.set("myParam", "myValue");
queryParams.set("rows", "10");
 
// Replace current querystring with the new one.
history.replaceState(null, null, "?"+queryParams.toString());

replaceState()를 사용하여 현재 이력 엔트리를 변경하는 대신 pushState() 메서드를 사용하여 새 이력 엔트리를 만들 수도 있습니다.

history.pushState(null, null, "?"+queryParams.toString());

https://zgadzaj.com/development/javascript/how-to-change-url-query-parameter-with-javascript-only

이 작업을 수행하려면 내 라이브러리를 사용할 수 있습니다. https://github.com/Mikhus/jsurl

var url = new Url('site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc');
url.query.rows = 10;
alert( url);

다음 사항을 고려하십시오.

const myUrl = new URL("http://www.example.com?columns=5&rows=20");
myUrl.searchParams.set('rows', 10);
console.log(myUrl.href); // http://www.example.com?columns=5&rows=10
myUrl.searchParams.set('foo', 'bar'); // add new param
console.log(myUrl.href); // http://www.example.com?columns=5&rows=10&foo=bar

그것은 당신이 요구한 것과 정확히 같은 일을 할 것입니다.URL " " " " " " " 입니다. 쪽이든)을 .http ""https)

저는 어떤 선택에도 사용할 수 있는 작은 도우미 기능을 썼습니다.필요한 것은 임의의 선택 요소에 "redirect On Change" 클래스를 추가하는 것뿐입니다.이것에 의해, 새로운/변경된 쿼리 스트링 파라미터(선택의 id 및 값과 같음)로 페이지가 새로고침됩니다.예를 들면, 다음과 같습니다.

<select id="myValue" class="redirectOnChange"> 
    <option value="222">test222</option>
    <option value="333">test333</option>
</select>

위의 예에서는 "?myValue=222" 또는 "?myValue=333"을 추가하고(다른 매개 변수가 있는 경우 "&" 사용) 페이지를 다시 로드합니다.

j쿼리:

$(document).ready(function () {

    //Redirect on Change
    $(".redirectOnChange").change(function () {
        var href = window.location.href.substring(0, window.location.href.indexOf('?'));
        var qs = window.location.href.substring(window.location.href.indexOf('?') + 1, window.location.href.length);
        var newParam = $(this).attr("id") + '=' + $(this).val();

        if (qs.indexOf($(this).attr("id") + '=') == -1) {
            if (qs == '') {
                qs = '?'
            }
            else {
                qs = qs + '&'
            }
            qs = qs + newParam;

        }
        else {
            var start = qs.indexOf($(this).attr("id") + "=");
            var end = qs.indexOf("&", start);
            if (end == -1) {
                end = qs.length;
            }
            var curParam = qs.substring(start, end);
            qs = qs.replace(curParam, newParam);
        }
        window.location.replace(href + '?' + qs);
    });
});

javascript URL 사용:

var url = new URL(window.location);
(url.searchParams.has('rows') ? url.searchParams.set('rows', rows) : url.searchParams.append('rows', rows));
window.location = url;

var url = new URL(window.location.href);
var search_params = url.searchParams;
search_params.set("param", value);
url.search = search_params.toString();
var new_url = url.pathname + url.search;
window.history.replaceState({}, '', new_url);

여기에서는, Adil Malik씨의 답변을 받아, 이것에 의해서 특정된 3개의 문제를 수정했습니다.

/**
 * Adds or updates a URL parameter.
 *
 * @param {string} url  the URL to modify
 * @param {string} param  the name of the parameter
 * @param {string} paramVal  the new value for the parameter
 * @return {string}  the updated URL
 */
self.setParameter = function (url, param, paramVal){
  // http://stackoverflow.com/a/10997390/2391566
  var parts = url.split('?');
  var baseUrl = parts[0];
  var oldQueryString = parts[1];
  var newParameters = [];
  if (oldQueryString) {
    var oldParameters = oldQueryString.split('&');
    for (var i = 0; i < oldParameters.length; i++) {
      if(oldParameters[i].split('=')[0] != param) {
        newParameters.push(oldParameters[i]);
      }
    }
  }
  if (paramVal !== '' && paramVal !== null && typeof paramVal !== 'undefined') {
    newParameters.push(param + '=' + encodeURI(paramVal));
  }
  if (newParameters.length > 0) {
    return baseUrl + '?' + newParameters.join('&');
  } else {
    return baseUrl;
  }
}

URLearchParams 문서에는 이력 스택에 영향을 주지 않고 매우 깔끔한 방법이 있습니다.

// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);

window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0

마찬가지로 파라미터를 삭제한다.

params.delete('version')
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?

이게 내가 하는 일이야.editParams() 함수를 사용하면 임의의 파라미터를 추가, 삭제 또는 변경할 수 있습니다.그 후 삽입 replaceState() 함수를 사용하여 URL을 갱신할 수 있습니다.

window.history.replaceState('object or string', 'Title', 'page.html' + editParams('sorting', ModifiedTimeAsc));


// background functions below:

// add/change/remove URL parameter
// use a value of false to remove parameter
// returns a url-style string
function editParams (key, value) {
  key = encodeURI(key);

  var params = getSearchParameters();

  if (Object.keys(params).length === 0) {
    if (value !== false)
      return '?' + key + '=' + encodeURI(value);
    else
      return '';
  }

  if (value !== false)
    params[key] = encodeURI(value);
  else
    delete params[key];

  if (Object.keys(params).length === 0)
    return '';

  return '?' + $.map(params, function (value, key) {
    return key + '=' + value;
  }).join('&');
}

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

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

솔루션:

const setParams = (data) => {
    if (typeof data !== 'undefined' && typeof data !== 'object') {
        return
    }

    let url = new URL(window.location.href)
    const params = new URLSearchParams(url.search)

    for (const key of Object.keys(data)) {
        if (data[key] == 0) {
            params.delete(key)
        } else {
            params.set(key, data[key])
        }
    }

    url.search = params
    url = url.toString()
    window.history.replaceState({ url: url }, null, url)
}

그런 다음 "setParams"를 호출하고 설정할 데이터가 포함된 개체를 전달합니다.

예:

$('select').on('change', e => {
    const $this = $(e.currentTarget)
    setParams({ $this.attr('name'): $this.val() })
})

제 경우 html select 입력이 변경되었을 때 갱신하고 값이 "0"이면 파라미터를 삭제해야 합니다.개체 키가 "null"인 경우에도 함수를 편집하고 URL에서 매개 변수를 제거할 수 있습니다.

이게 도움이 되길 바래

주소 표시줄의 URL을 변경하는 경우:

const search = new URLSearchParams(location.search);
search.set('rows', 10);
location.search = search.toString();

주의, 변경location.search는 페이지를 새로고침합니다.

여기 라이브러리를 사용한 간단한 해결책이 있습니다.

const qs = require('query-string')
function addQuery(key, value) {
  const q = qs.parse(location.search)
  const url = qs.stringifyUrl(
    {
      url: location.pathname,
      query: {
      ...q,
      [key]: value,
      },
    },
    { skipEmptyString: true }
  );
  window.location.href = url
  // if you are using Turbolinks
  // add this: Turbolinks.visit(url)
}
// Usage
addQuery('page', 2)

사용하시는 경우react없이.react-router

export function useAddQuery() {
  const location = window.location;
  const addQuery = useCallback(
    (key, value) => {
      const q = qs.parse(location.search);
      const url = qs.stringifyUrl(
        {
          url: location.pathname,
          query: {
            ...q,
            [key]: value,
          },
        },
        { skipEmptyString: true }
      );
      window.location.href = url
    },
    [location]
  );

  return { addQuery };
}
// Usage
const { addQuery } = useAddQuery()
addQuery('page', 2)

사용하시는 경우react와 함께react-router

export function useAddQuery() {
  const location = useLocation();
  const history = useHistory();

  const addQuery = useCallback(
    (key, value) => {
      let pathname = location.pathname;
      let searchParams = new URLSearchParams(location.search);
      searchParams.set(key, value);
      history.push({
        pathname: pathname,
        search: searchParams.toString()
      });
    },
    [location, history]
  );

  return { addQuery };
}

// Usage
const { addQuery } = useAddQuery()
addQuery('page', 2)

PS:qs로부터의 Import입니다.query-string모듈.

Sujoy의 답변에 대한 또 다른 변형입니다.변수 이름을 변경하고 네임스페이스 래퍼를 추가했습니다.

window.MyNamespace = window.MyNamespace  || {};
window.MyNamespace.Uri = window.MyNamespace.Uri || {};

(function (ns) {

    ns.SetQueryStringParameter = function(url, parameterName, parameterValue) {

        var otherQueryStringParameters = "";

        var urlParts = url.split("?");

        var baseUrl = urlParts[0];
        var queryString = urlParts[1];

        var itemSeparator = "";
        if (queryString) {

            var queryStringParts = queryString.split("&");

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

                if(queryStringParts[i].split('=')[0] != parameterName){

                    otherQueryStringParameters += itemSeparator + queryStringParts[i];
                    itemSeparator = "&";
                }
            }
        }

        var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue;

        return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter;
    };

})(window.MyNamespace.Uri);

사용 현황:

var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford");

저도 JavaScript에서 URL 쿼리 파라미터를 취득하고 설정하기 위한 라이브러리를 작성했습니다.

다음은 그 사용 예를 제시하겠습니다.

var url = Qurl.create()
  , query
  , foo
  ;

개체, 키 또는 추가/변경/제거로 쿼리 매개 변수를 가져옵니다.

// returns { foo: 'bar', baz: 'qux' } for ?foo=bar&baz=qux
query = url.query();

// get the current value of foo
foo = url.query('foo');

// set ?foo=bar&baz=qux
url.query('foo', 'bar');
url.query('baz', 'qux');

// unset foo, leaving ?baz=qux
url.query('foo', false); // unsets foo

같은 것을 찾고 있었는데, https://github.com/medialize/URI.js이 꽤 좋은 것 같습니다.

-- 갱신

더 좋은 패키지를 찾았습니다.https://www.npmjs.org/package/qs 에서는 get param 내의 어레이도 취급합니다.

라이브러리가 없습니다.URL() WebAPI(https://developer.mozilla.org/en-US/docs/Web/API/URL)를 사용합니다.

function setURLParameter(url, parameter, value) {
    let url = new URL(url);
    if (url.searchParams.get(parameter) === value) {
        return url;
    }
    url.searchParams.set(parameter, value);
    return url.href;
}

IE에서는 동작하지 않습니다.https://developer.mozilla.org/en-US/docs/Web/API/URL#Browser_compatibility

let url= new URL("https://example.com/site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc")
url.searchParams.set('rows', 10)
console.log(url.toString())

오래된 질문인 거 알아요.쿼리 파라미터를 추가 또는 갱신할 수 있도록 위의 기능을 강화하였습니다.여전히 순수 JS 솔루션입니다.

                      function addOrUpdateQueryParam(param, newval, search) {

                        var questionIndex = search.indexOf('?');

                        if (questionIndex < 0) {
                            search = search + '?';
                            search = search + param + '=' + newval;
                            return search;
                        }

                        var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
                        var query = search.replace(regex, "$1").replace(/&$/, '');

                        var indexOfEquals = query.indexOf('=');

                        return (indexOfEquals >= 0 ? query + '&' : query + '') + (newval ? param + '=' + newval : '');
                    }

my function support param 제거

function updateURLParameter(url, param, paramVal, remove = false) {
        var newAdditionalURL = '';
        var tempArray = url.split('?');
        var baseURL = tempArray[0];
        var additionalURL = tempArray[1];
        var rows_txt = '';

        if (additionalURL)
            newAdditionalURL = decodeURI(additionalURL) + '&';

        if (remove)
            newAdditionalURL = newAdditionalURL.replace(param + '=' + paramVal, '');
        else
            rows_txt = param + '=' + paramVal;

        window.history.replaceState('', '', (baseURL + "?" + newAdditionalURL + rows_txt).replace('?&', '?').replace('&&', '&').replace(/\&$/, ''));
    }

언급URL : https://stackoverflow.com/questions/1090948/change-url-parameters-and-specify-defaults-using-javascript