Home > Web Front-end > JS Tutorial > How can I modify URL parameters and specify defaults using JavaScript?

How can I modify URL parameters and specify defaults using JavaScript?

Susan Sarandon
Release: 2024-11-11 01:22:02
Original
815 people have browsed it

How can I modify URL parameters and specify defaults using JavaScript?

Change URL Parameters and Specify Defaults Using JavaScript

Problem:

You need to modify the 'rows' URL parameter in a given URL to a specific value or add it with a default value if it doesn't exist.

Solution:

Use JavaScript functions like updateURLParameter to manipulate URL parameters. Here's an extended version of the code provided in the problem answer:

/**
 * http://stackoverflow.com/a/10997390/11236
 */
function updateURLParameter(url, param, paramVal) {
    let newAdditionalURL = "";
    const tempArray = url.split("?");
    const baseURL = tempArray[0];
    let additionalURL = tempArray[1];
    let temp = "";

    if (additionalURL) {
        const additionalURLArray = additionalURL.split("&");
        additionalURLArray.forEach((paramValue) => {
            if (paramValue.split('=')[0] != param) {
                newAdditionalURL += temp + paramValue;
                temp = "&";
            }
        });
    }

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

// Function Calls:
const newURL1 = updateURLParameter(window.location.href, 'locId', 'newLoc');
const newURL2 = updateURLParameter(newURL1, 'resId', 'newResId');

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

Updated Version Handling URL Anchors:

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

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

        const tempArray = additionalURL.split("&");

        tempArray.forEach((paramValue) => {
            if (paramValue.split('=')[0] != param) {
                newAdditionalURL += temp + paramValue;
                temp = "&";
            }
        });
    } else {
        const tmpAnchor = baseURL.split("#");
        TheParams = tmpAnchor[0];
        TheAnchor = tmpAnchor[1];

        if (TheParams) baseURL = TheParams;
    }

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

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

The above is the detailed content of How can I modify URL parameters and specify defaults using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template