Manipulate Query Parameters Of URL In JavaScript – vanilla-js-url

Preview:

Description:

Just another URL manipulation JavaScript library that enables you to set and get (encoded/decoded) query parameters in URLs.

See Also:

• Set & Get Query Parameters In URL – hashparser
• Set And Get URL Hash With JavaScript – urlhash.js

How to use it:

1. Install & download.

# Yarn
$ yarn add vanilla-js-url
# NPM
$ npm i vanilla-js-url

2. Import the vanilla-js-url JavaScript library.

<script src="dist/url.min.js"></script>

3. Get query parameters from a URL you provide.

// basic
wurl.getParams('https://www.cssscript.com/example?css=1&script=2&com=3');
=> {"css":"1","script":"2","com":"3"}
// decode = false
wurl.getParams('https://www.cssscript.com/example?css=1&script=2&com=3', false);
=> {"css":"1","script":"2","com":"3"}
// extended
wurl.getParamsExtended('https://www.cssscript.com/example?css[t]=1&css[j]=2');
=> { css: { t: '1', j: '2' } }

4. Add query parameters to the URL.

// basic
wurl.add('https://www.cssscript.com/example', {"css":"1","script":"2","com":"3"});
=> https://www.cssscript.com/example?css=1&script=2&com=3
// encode = true
wurl.add('https://www.cssscript.com/example', {"css[c]":"1","css[s]":"1"}, true);
=> https://www.cssscript.com/example?css%5Bc%5D=1&css%5Bs%5D=1

5. Get the path from a URL.

wurl.path('https://www.cssscript.com/category/slider/index.html');
=> /category/slider/index.html