How to create and manipulate an URL in Javascript? (Browser URL Object)

About

This article shows you how to get and manipulate an URL with Javascript.

Type

URL object

You can manipulate an URL with the URL web API object 1)

  • Build an URL object
const url = new URL(window.parent.location.href); // parent because this code runs in a iframe (if not delete it)
  • Print a URL properties (…host, hostname,…)
console.log("Hostname: "+url.hostname); //
console.log("Path: "+url.pathname); //
console.log("Id Parameters: "+url.searchParams.get("id")); // none but it should work
url.searchParams.set("id","#123"); 
console.log("Id Parameters After Setting: "+url.searchParams.get("id")); 
  • Print
console.log("New URL: "+url.toString());

Query Parameters

You can also manipulate only the URL Query Parameters.

Note that url.searchParams is available in a URL at url.searchParams.

const url = new URL("https://example.com/path?key1=value1&key2=value2");
const queryParams = new URLSearchParams(url.search);
console.log(`Size?: ${queryParams.size}`); 
console.log(`Key1?: ${queryParams.has("key1")}`); 
console.log(`GetKey1: ${queryParams.get("key1")}`); 
console.log(`Set`); 
queryParams.set("key3","value3");
console.log(`Delete`); 
queryParams.delete("key1");
console.log(`toString: ${queryParams.toString()}`); 

Ps: Note that searchParams is a iterator

How to get the url of the actual HTML page (with Javascript)

The value is stored in the href property

  • We used window.parent because the code is run in a iframe but in a normal page, you would just use window.
console.log("URL: "+window.parent.location.href); // url
// value is `about:srcdoc` because we are in a iframe
console.log("URL in iframe: "+window.location.href);
console.log("Path: "+window.parent.location.pathname);
console.log("Host: "+window.parent.location.host); 
  • hostname - only the name of the host (ie without the port)
console.log("Hostname: "+window.parent.location.hostname); 
console.log("Anchor: "+window.parent.location.hash);  
  • port (empty string if none)
console.log("Port: "+window.parent.location.port);  
console.log("Protocol: "+window.parent.location.protocol); 
console.log("Query String: "+window.parent.location.search);

URL tied to a memory resource such as a file

The DOM URL.createObjectURL() and URL.revokeObjectURL() methods let you create data URL strings.

More Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)





Discover More
Chrome Devtool Xhr Fetch Request
Browser - Web API - Fetch function

The fetch function is part of the web api function and is a AJAX call. It's one of the possibilities to fetch a resource. XMLHttpRequest (XHR) The fetch function returns a promise as response. The Fetch...
Chrome Devtool Xhr Fetch Request
Browser - XMLHttpRequest (XHR) API

The XMLHttpRequest is a web api function that performs an resource fetch with an Aysnchronous HTTP request XMLHttpRequestAPIAJAX programmingfetch API The status of an XHR request. Value Constant...
Blob Url In Browser Address
Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)

An ObjectUrl is the representation of blob object as a data URL strings that can be used with any fetch HTML element that accepts an URL as an attribute. HTML Example: This HTML was generated with...
Javascript - Web API (Browser Builtin API )

The Web API is a collection of javascript function (API) that a browser implements. It implements: principally the API of the DOM. and others specific browser function ... This is...
Web - URL

An Uniform Resource Locator (URL) is a universal identifier for a resource. Because the resource can be created dynamically, an URL is also logically a request. It's the string that is understood by...



Share this page:
Follow us:
Task Runner