URL manipulation with JavaScript

This article will look at a pair of nuances within JavaScript that deal with URLs:

window.location

With JavaScript, we can use window.location in the browser console (Windows: Control+Shift+I, Mac: ⌘(Command)+Option+I) to find out some 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
30

We could then store window.location in variables with compact variable names to use them quite handily, for example:

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

Applications of this include website breadcrumbs and dynamic navigation!

decodeURIComponent and encodeURIComponent

JavaScript contains a built-in function called decodeURIComponent which takes in a URL (or URI) 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 argument fed into the parameter! 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 alphabet:

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 allows us to tinker around with the aforemetioned: