JavaScript를 사용하여 URL 매개변수를 어떻게 조작하고 수정할 수 있습니까?

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

동적으로 생성된 URL이 점점 보편화됨에 따라 URL 매개변수를 조작할 수 있는 유연성을 갖는 것이 중요합니다. 효율적으로. 이 글에서는 JavaScript를 사용하여 URL에 매개변수를 수정하고 추가하는 방법을 살펴보겠습니다.

매개변수 값 변경

다음과 유사한 URL이 있다고 가정합니다. 제공됨:

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

'rows' 매개변수를 특정 값(예: 10)으로 수정하려면 다음 코드를 사용할 수 있습니다. :

const newUrl = updateURLParameter(window.location.href, 'rows', 10);

updateURLParameter 함수는 'rows' 매개변수가 존재합니다. 그렇다면 해당 값을 지정된 값으로 바꿉니다. 존재하지 않는 경우 매개변수를 URL 끝에 추가합니다.

새 매개변수 추가

또는 'rows' 매개변수가 없는 경우 초기 URL에 존재하는 경우 다음과 동일한 함수를 사용하여 추가할 수 있습니다.

const newUrl = updateURLParameter(window.location.href, 'rows', 10);

이 코드는 'rows' 매개변수 및 해당 값은 10으로 설정됩니다.

함수 구현

다음은 updateURLParameter 함수의 전체 기능 구현입니다.

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

  if (additionalURL) {
    const tmpAnchor = additionalURL.split("#");
    additionalURL = tmpAnchor[0];
    additionalURL = additionalURL.split("&");

    for (const key in additionalURL) {
      if (additionalURL[key].split('=')[0] !== param) {
        newAdditionalURL += temp + additionalURL[key];
        temp = "&";
      }
    }
  }

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

이 기능을 사용하려면 현재 URL, 수정하거나 추가하려는 매개변수 및 해당 값을 전달하기만 하면 됩니다. 이 함수는 지정된 변경 사항이 적용된 새 URL을 반환합니다.

이러한 JavaScript 기술을 사용하면 URL 매개변수를 동적으로 조작할 수 있으므로 웹 애플리케이션의 동작을 쉽게 사용자 정의하고 제어할 수 있습니다.

위 내용은 JavaScript를 사용하여 URL 매개변수를 어떻게 조작하고 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!