JavaScript에서 쿼리 문자열 매개변수를 우아하게 삭제

URL 작업 시 쿼리 문자열 매개변수를 조작해야 하는 경우가 많습니다. 일반적인 작업 중 하나는 특정 매개변수를 제거하는 것입니다. 정규 표현식은 해결책이 될 수 있지만 오류가 발생하기 쉽고 유연성이 떨어질 수 있습니다.

더 나은 접근 방식: 구문 분석 및 조작

정규 표현식을 사용하는 대신 문자열을 개체에 쿼리하고 이를 조작한 다음 URL을 재구성합니다. 이 접근 방식은 다음과 같은 여러 가지 이점을 제공합니다.

• 단순성: 읽고 쓰기가 더 쉽습니다.
• 유연성: 복잡한 매개변수 이름과 값을 처리할 수 있습니다. .
• 안전: 관련 없는 항목의 실수로 수정되는 것을 방지합니다. 매개변수.

구현

다음은 이 접근 방식을 사용하는 JavaScript 함수의 예입니다.

function removeURLParameter(url, parameter) {
    // Split the URL into parts
    var urlparts = url.split('?');

    // Check if the URL has a query string
    if (urlparts.length >= 2) {
        var prefix = encodeURIComponent(parameter)   '=';
        var pars = urlparts[1].split(/[&;]/g);

        // Iterate over the parameters
        for (var i = pars.length; i-- > 0;) {
            // Remove the parameter if it matches the prefix
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {
                pars.splice(i, 1);
            }
        }

        // Reconstruct the URL
        return urlparts[0]   (pars.length > 0 ? '?'   pars.join('&') : '');
    }

    // Return the original URL if no query string
    return url;
}

사용법:

이 기능을 사용하려면 원래 URL과 제거하려는 매개변수를 전달하기만 하면 됩니다. 예를 들면 다음과 같습니다.

const updatedURL = removeURLParameter('https://example.com?foo=bar&baz=qux', 'foo');

이렇게 하면 다음이 반환됩니다. 'foo' 매개변수가 없는 URL:

https://example.com?baz=qux

이 접근 방식을 사용하면 다음을 조작할 수 있습니다. 쿼리 문자열 매개변수를 더욱 쉽고 안정적으로 사용할 수 있습니다. 의도한 매개변수만 수정되도록 하여 코드를 손상시킬 수 있는 실수로 인한 변경을 방지합니다.