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:

/* on https://www.joncoded.com/code/snippets/#test as an example */

console.log(window.location.hostname)
// www.joncoded.com
// i.e. the domain name

console.log(window.location.host)
// www.joncoded.com
// i.e. the domain name but also the port number if the URL had one

console.log(window.location.href)
// https://www.joncoded.com/code/snippets#test
// i.e. full URL with the protocol (in most cases, https://)

console.log(window.location.origin)
// https://www.joncoded.com
// i.e. the domain name with the protocol (in most cases, https://)

console.log(window.location.pathname)
// /code/snippets
// i.e. the path without the protocol, domain name and hash

console.log(window.location.port)
// ""
// i.e. the port number (in this case there is none)

console.log(window.location.hash)
// "#test"
// i.e. the hash including the hashtag, empty string if none

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

let path = window.location.path
document.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:

let example1 = decodeURIComponent("https://joncoded.com/")
document.write("example1: " + example1 + "<br /><br />")
// 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:

let example2 = decodeURIComponent("https://www.joncoded.com/?query=%E8%A6%96%E9%A0%BB")
document.write("example2: " + example2 + "<br /><br />")
// 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:

let example3 = decodeURIComponent("https://www.joncoded.com/?query=%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE")
document.write("example3: " + example3 + "<br /><br />")
// 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: