Parse URL strings with native JavaScript API
There’s an easy native way to parse URL strings with JavaScript API.
To do that you’ll need to use the URL
interface:
TheURL
interface is used to parse, construct, normalize, and encode URLs.
—MDN
To use this API you’ll need to create a new object via new URL()
. This object will hold multiple URL properties and methods which will allow you to later manipulate parts of URL.
const url = 'http://localhost:8888/wp-one/wp-admin/post-new.php?post_type=page&vcv-action=frontend'
const urlData = new URL(url)
The urlData
object will look like this:
{
href: "http://localhost:8888/wp-one/wp-admin/post-new.php?post_type=page&vcv-action=frontend"
origin: "http://localhost:8888"
protocol: "http:"
username: ""
password: ""
host: "localhost:8888"
hostname: "localhost"
port: "8888"
pathname: "/wp-one/wp-admin/post-new.php"
search: "?post_type=page&vcv-action=frontend"
searchParams: URLSearchParams {}
hash: ""
__proto__: URL
href: (...)
origin: (...)
protocol: (...)
username: (...)
password: (...)
host: (...)
hostname: (...)
port: (...)
pathname: (...)
search: (...)
searchParams: (...)
hash: (...)
toJSON: ƒ toJSON()
toString: ƒ toString()
}
The initial URL string is torn apart and each part is accessible via corresponding property that holds a string
value. E.g. the protocol can be accessed via protocol
property:
urlData.protocol // 'http:'
The cool thing about it, is that now you can manipulate the search query of the URL via searchParams
property which return the URLSearchParams
interface.
TheURLSearchParams
interface can be used to build and manipulate the URL query string.
—MDN
Let’s use the existing data to get the part of the search query:
url // 'http://localhost:8888/wp-one/wp-admin/post-new.php?post_type=page&vcv-action=frontend'
url.searchParams.get('post_type') // 'page'
This interface allows also to delete, set, sort, iterate and more!
The URL interface is availabe in all modern browsers: