Get the URL/Address of the Current Page in JavaScript

const pageUrl = window.location.href;

document
  .querySelector(".pageUrl")
  .innerHTML = pageUrl;

let urlForParts = new URL(window.location.href);

// overwriting so all the examples 
// have something to show:
urlForParts = new URL("https://some-user:some-password@www.example.com:80/some/path?alfa=bravo&charlie=delta#after-the-hash");


const parts = [
  "hash", "host", "hostname", "href",
  "origin", "password", "pathname", 
  "port", "protocol", "search", 
  "searchParams", "username"
];

const outputList = document
  .querySelector(".urlParts")

parts.forEach((part) => {
  const item = document.createElement("li");

  if (part !== "searchParams") {
    item.innerHTML = `${part}: ${urlForParts[part]}`;
    outputList.appendChild(item);
  } else {
    // searchParams is an URLSearchParams object so show it's keys
    item.innerHTML = `${part}`;
    const paramsList = document.createElement("ul");
    console.log(urlForParts[part]);
    for (const [key, value] of urlForParts[part]) {
      const paramItem = document.createElement("li");
      paramItem.innerHTML = `${key}: ${value}`;
      paramsList.appendChild(paramItem);
    }
    item.appendChild(paramsList);
    outputList.appendChild(item);
  }

});