Manipuler les paramètres d'URL avec JavaScript

📑 Découvrir URLSearchParams

L'objet URLSearchParams offre une manière intuitive de manipuler les paramètres d'URL. Voici un exemple pour lire des paramètres d'une URL :

// Exemple d'URL : https://example.com?name=John&age=30
const params = new URLSearchParams(window.location.search);

const name = params.get('name'); // "John"
const age = params.get('age');   // "30"

console.log(name, age);

Ici, la méthode params.get() extrait la valeur d'un paramètre donné. Si le paramètre est absent, elle renvoie null.

🔧 Ajouter, modifier et supprimer des paramètres

URLSearchParams permet également d'ajouter, de modifier ou de supprimer des paramètres dynamiquement :

// Ajouter ou modifier un paramètre
params.set('page', 2); // ?name=John&age=30&page=2

// Supprimer un paramètre
params.delete('age'); // ?name=John&page=2

// Mettre à jour l'URL sans recharger la page
history.replaceState({}, '', `${location.pathname}?${params}`);

Ces manipulations permettent de mettre à jour l'URL de manière dynamique, sans recharger la page, un atout majeur pour les applications modernes.

🧪 Exemple pratique : Filtrer une liste avec les paramètres d'URL

Considérons un exemple où une liste d'articles est filtrée en fonction des paramètres dans l'URL. Voici la structure HTML :

<div class="filter-container">
    <label for="category">Catégorie :</label>
    <select id="category">
        <option value="all">Toutes</option>
        <option value="tech">Technologie</option>
        <option value="health">Santé</option>
    </select>
</div>

<ul class="article-list">
    <li data-category="tech">Article sur JavaScript</li>
    <li data-category="health">Article sur le bien-être</li>
    <li data-category="tech">Guide CSS</li>
</ul>

⚙️ Ajouter la logique JavaScript

Voici le code pour synchroniser l'URL avec la sélection du filtre et mettre à jour la liste des articles visibles :

// Sélection des éléments
const categorySelect = document.getElementById('category');
const articleList = document.querySelectorAll('.article-list li');

// Charger le filtre initial depuis l'URL
const params = new URLSearchParams(window.location.search);
const selectedCategory = params.get('category') || 'all';
categorySelect.value = selectedCategory;
filterArticles(selectedCategory);

// Mettre à jour les articles filtrés selon le choix
categorySelect.addEventListener('change', (e) => {
    const category = e.target.value;

    // Modifier l'URL
    params.set('category', category);
    history.replaceState({}, '', `${location.pathname}?${params}`);

    // Filtrer les articles
    filterArticles(category);
});

// Fonction de filtrage
function filterArticles(category) {
    articleList.forEach(article => {
        article.style.display = (category === 'all' || article.dataset.category === category) ? '' : 'none';
    });
}

🎨 Essayez l'exemple interactif !

Vous pouvez maintenant tester un exemple fonctionnel directement dans votre navigateur. Cliquez sur le lien ci-dessous pour accéder à la démonstration :

👉 Accéder à l'exemple interactif

Si vous souhaitez créer votre propre version, copiez le code HTML et JavaScript fourni ci-dessus dans un fichier .html. Ouvrez-le avec un serveur local et observez comment l'URL s'adapte lorsque vous changez les filtres, tout en mettant à jour dynamiquement la liste d'articles affichés.