classUrl

URL parser and manipulator built on the native URL API. If no URL is provided, document.location.href (current browser URL) is used as default.

import classUrl from '@pim.sk/utils/class-url.mjs'

Usage

Parse a URL and access its location properties.

const url  = "https://example.com/shop/products?page=2&sort=asc#top"
const curl = new classUrl(url)
output = curl.location

Get path segments as an array.

'https://example.com/shop/products/list'

const paths = curl.aPath

Get query parameters as an object.

'https://example.com/page?a=1&b=two'

const query = curl.aQuery

Get directory and filename from the URL path.

'https://example.com/shop/products/detail.php'

const dir  = curl.dirname
const base = curl.basename

Change the pathname of the URL.

'https://example.com/shop/products'

curl.pathname = "shop/orders/new"

Add or update query parameters (string or object).

'https://example.com/page?a=1'

curl.addQuery = "b=2&c=three"

Remove query parameters by key (comma-separated or array).

'https://example.com/page?a=1&b=2&c=3'

curl.removeQuery = "a,c"

Get or set the URL hash (without #).

'https://example.com/page#section2'

const h = curl.hash   // get
curl.hash = "top"     // set

Working with browser history and manipulating URL addresses without reload the page.

Change the browser URL and write a new entry to the history stack (back button will return to previous URL).

name = "MyPage"
path = "shop/orders/new"

const curl = new classUrl()
curl.addHistoryPush("MyPage", null, "shop/orders/new")

Change the browser URL and REPLACE the current history entry (back button will NOT return to previous URL).

name = "MyPage"
path = "shop/orders/detail"

const curl = new classUrl()
curl.addHistoryReplace("MyPage", null, "shop/orders/detail")

Register a listener for the browser back/forward button. Callback receives event.state (query params at the time of push).

fn = (state) => { ... }

const curl = new classUrl()
curl.addHistoryBack((state, values, event) => {
    console.log("back:", state)
})