Comment puis-je manipuler et modifier les paramètres d'URL à l'aide de JavaScript ?

Modifier les paramètres d'URL et spécifier les valeurs par défaut à l'aide de JavaScript

Les URL générées dynamiquement étant de plus en plus répandues, il est crucial d'avoir la flexibilité nécessaire pour manipuler les paramètres d'URL. efficacement. Dans cet article, nous allons explorer comment modifier et ajouter des paramètres à une URL à l'aide de JavaScript.

Modification des valeurs des paramètres

Supposons que vous ayez une URL similaire à celle fourni :

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

Pour modifier le paramètre 'rows' à une valeur spécifique, disons 10, vous pouvez utiliser le code suivant :

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

La fonction updateURLParameter vérifie si le paramètre 'rows' existe. Si c'est le cas, il remplace sa valeur par celle spécifiée. S'il n'existe pas, il ajoute le paramètre à la fin de l'URL.

Ajout de nouveaux paramètres

Alternativement, si le paramètre 'rows' n'existe pas existe dans l'URL initiale, vous pouvez l'ajouter en utilisant la même fonction comme suit :

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

Ce code crée une nouvelle URL avec le paramètre 'rows' et sa valeur définie sur 10.

Implémentation de la fonction

Voici une implémentation entièrement fonctionnelle de la fonction 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;
}

Pour utiliser cette fonction, transmettez simplement l'URL actuelle, le paramètre souhaité à modifier ou à ajouter, et sa valeur. La fonction renverra une nouvelle URL avec les modifications spécifiées.

Grâce à ces techniques JavaScript, vous pouvez manipuler les paramètres d'URL de manière dynamique, ce qui facilite la personnalisation et le contrôle du comportement de vos applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!