Eenvoudige URL-manipulatie met URLSearchParams

De URLSearchParams API biedt een consistente interface voor de stukjes en beetjes van de URL en maakt triviale manipulatie van de queryreeks mogelijk (dat spul na ? ).

Traditioneel gebruiken ontwikkelaars regexs en het splitsen van tekenreeksen om queryparameters uit de URL te halen. Als we allemaal eerlijk tegen onszelf zijn, is dat niet leuk. Het kan vervelend en foutgevoelig zijn om het goed te krijgen. Een van mijn duistere geheimen is dat ik dezelfde hulpmethoden get|set|removeURLParameter hergebruikt in verschillende grote Google.com-apps, waaronder Google Santa Tracker en Google I/O 2015 web .

Het is tijd voor een goede API die dit voor ons doet!

URLSearchParams-API

Probeer de demo

Chrome 49 implementeert URLSearchParams uit de URL spec , een API die handig is bij het rommelen met URL-queryparameters. Ik beschouw URLSearchParams als een gelijkwaardig gemak voor URL's als FormData voor formulieren.

Dus wat kun je ermee doen? Met een URL-tekenreeks kunt u eenvoudig parameterwaarden extraheren:

// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+string&version=1&person=Eric');

params.get('q') === "search string"
params.get('version') === "1"
Array.from(params).length === 3

for (let p of params) {
    console.log(p);
}

stel een parameterwaarde in:

params.set('version', 2);

voeg nog een waarde toe voor een bestaande parameter:

params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']

verwijder een parameter(s):

params.delete('person');

Werken met URL's

Meestal werkt u waarschijnlijk met volledige URL's of wijzigt u de URL van uw app. In deze gevallen kan de URL constructor bijzonder handig zijn:

const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);

params.has('baz') === true
params.toString() === 'foo=1&bar=2&baz=3'

Om daadwerkelijke wijzigingen in de URL aan te brengen, kunt u parameters ophalen, hun waarden bijwerken en vervolgens history.replaceState gebruiken om de URL bij te werken.

// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);

window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0

Hier heb ik ES6- sjabloonreeksen gebruikt om een ​​bijgewerkte URL te reconstrueren op basis van het bestaande URL-pad van de app en de gewijzigde parameters.

Integratie met andere plaatsen waar URL's worden gebruikt

Standaard wordt bij het verzenden van FormData in een fetch() API-verzoek een uit meerdere delen bestaande hoofdtekst gemaakt. Als je het nodig hebt, biedt URLSearchParams een alternatief mechanisme voor POST-gegevens dat urlengecodeerd is in plaats van multipart na te bootsen.

const params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
    method: 'POST',
    body: params
}).then(...)

Hoewel het nog niet in Chrome is geïmplementeerd, kan URLSearchParams ook worden geïntegreerd met de URL constructor en a . Beide ondersteunen onze nieuwe vriend door een alleen-lezen eigenschap aan te bieden, .searchParams voor toegang tot queryparameters:

const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';

Links krijgen ook een .searchParams eigenschap: 

const a = document.createElement('a');
a.href = 'https://example.com?filter=api';

// a.searchParams.get('filter') === 'api';

Functiedetectie en browserondersteuning

Momenteel ondersteunen Chrome 49, Firefox 44 en Opera 36 URLSearchParams .

if ('URLSearchParams' in window) {
    // Browser supports URLSearchParams
}

Voor polyfills raad ik die op github.com/WebReflection/url-search-params aan.

Demo

Probeer het voorbeeld !

Om URLSearchParams in een echte app te zien, bekijk Polymer's materiaalontwerp Iconset Generator . Ik heb het gebruikt om de initiële status van de app in te stellen via een deep link . Lekker handig :)