URL manipulation with JavaScript

Let's look at some built-in JavaScript properties and methods that handle URLs:

• window.location
• decodeURIComponent (along with encodeURIComponent)

window.location

In the browser console (Windows: Control+Shift+I, Mac: ⌘(Command)+Option+I), we can use window.location to retrieve information about the browser's current URL:

1/* on https://www.joncoded.com/code/snippets/#test as an example */
2
3console.log(window.location.hostname)
4// www.joncoded.com
5// i.e. the domain name
6
7console.log(window.location.host)
8// www.joncoded.com
9// i.e. the domain name but also the port number if the URL had one
10
11console.log(window.location.href)
12// https://www.joncoded.com/code/snippets#test
13// i.e. full URL with the protocol (in most cases, https://)
14
15console.log(window.location.origin)
16// https://www.joncoded.com
17// i.e. the domain name with the protocol (in most cases, https://)
18
19console.log(window.location.pathname)
20// /code/snippets
21// i.e. the path without the protocol, domain name and hash
22
23console.log(window.location.port)
24// ""
25// i.e. the port number (in this case there is none)
26
27console.log(window.location.hash)
28// "#test"
29// i.e. the hash including the hashtag, empty string if none

We could then store window.location in variables with more compact variable names, allowing us to refer to them more easily:

1let path = window.location.path
2document.write("<h1> You are on: " + path + "</h1>")

Applications of this include website breadcrumbs and dynamic navigation: we could further break down the path using methods like split and toSpliced:

1let crumbs = path.split("/").toSpliced(0,2)
2// use toSpliced to remove "https:" and ""
3
4console.log(crumbs)
5// ["www.joncoded.com", "code", "snippets", "#test"]

decodeURIComponent and encodeURIComponent

JavaScript contains a built-in function called decodeURIComponent which takes in a URI (i.e., in our case, a URL) as a parameter:

1let example1 = decodeURIComponent("https://joncoded.com/")
2document.write("example1: " + example1 + "<br /><br />")
3// example1 : https://joncoded.com 

At first glance, this seems like a rather trivial example, as it simply outputs the whole argument! Let's look at a more interesting example:

1let example2 = decodeURIComponent("https://www.joncoded.com/?query=%E8%A6%96%E9%A0%BB")
2document.write("example2: " + example2 + "<br /><br />")
3// example2: https://www.joncoded.com/?query=視頻

As we just saw, that built-in decodeURIComponent() function can convert the query string's value (which looks like a bunch of random characters) into a "human-readable format", which could be characters from any human writing system; another example:

1let example3 = decodeURIComponent("https://www.joncoded.com/?query=%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE")
2document.write("example3: " + example3 + "<br /><br />")
3// example3: https://www.joncoded.com/?query=видео

(Typically, a human user would have entered those characters but a browser would encode them into a string of UTF-8 "percent symbol and hexadecimal digit pair" sequences.)

Also as another side note, JavaScript has another built-in function called encodeURIComponent that does just the opposite. It encodes text in a non-Latin alphabet into a UTF-8 sequence of percent symbols and hexadecimal digit pairs.

This built-in function can indeed be helpful in determining the original input written in a foreign script!

Final look

The following Codepen can let us play around with the aforementioned: