The Web API URL is used to access and manipulate URLs. URL stands for Uniform Resource Locator. A URL is a unique address which is pointing to the resource. The URL is essential for making HTTP requests for making interactions with the API and for getting or sending data.
We will explore the above topics with their description and understand them with suitable examples.
Concepts and Usage
The structuring and parsing of the URL follow the URL standard. A URL is composed of different parts. Some of the important parts are described below.
Syntax
https://www.index.html:443/file1/file2/resouce.html?id=val&password=val2#anchor
Components
Components | Descriptions |
|---|
| Scheme | The HTTP part of the URL is the schema which indicates the protocol that the browser must follow to get the URL resource. |
| Domain Name | The www.index.html part is the domain name. It indicates the server that is being requested in place of the domain name it can be an IP address. |
| Port | The 443 part is the port number which is the internal gate to access resources. |
| Path to resource | The path /file1/file2/resouce.html is the path to the resource on the server. |
| Parameters | The ?id=val&password=val2 is the parameter part that is provided to a web server. |
| Anchor | The #anchor is the anchor part. It indicates the part of the resource we want to access. |
Accessing components of URL
For a given URL, the object can be created & parsing can be done for the URL, along with facilitating access to its constituent portions through its properties quickly.
Syntax
// Creating the URL Object
let address = new URL("https://geeksforgeeks.com/login/username=val1&password=val2");
// Accessing the Host & Path Address
let host = address.host;
let path = address.pathname;
Here, we are trying to access the URL Object, Host, and Path Address for the given URL.
URL Modifications
To modify the value of the URLs that are represented by the object, we can simply add new values for them. For instance, from the below URL, we will modify the username and password, which will update the overall URL. Thus, the properties of the URL can be settable.
Syntax
// Changes the username and password attribute of the URL component.
let name = "geeks1";
let pswd = 'geek@123';
let url = new URL("https://geeksforgeeks.com/login");
url.username = name;
url.password = pswd;
Implementing the Queries
The search property of the URL component defines the portion of the query string. It allows one to look up the values of parameters. For instance, considering the below URL given, the search property of the URL component will be "username=val1&password=val2". To search for the individual parameters, the URLSearchParams object's get() method can be used.
Syntax
// The parameter username and password
// value which is pass with url.
let url = new URL("https://geeksforgeeks.com/login?username=val1&password=val2");
console.log( url.searchParams.get('username');
console.lgo(url.serachParams.get('password');
Static Method
- URL.canParse(): It checks if a URL string is valid and can be parsed. It is used to quickly validate if the url is valid or not without creating URL object. It returns true if it is valid else false.
- URL.createObjectURL(): It is used to create a temporary URL for a File or Blob object. It returns a string representing the object URL.
- URL.parse(): It creates a URL object from a URL string and an optional base URL. It is useful for parsing and resolving relative URLs. It returns a URL object if valid else null.
- URL.revokeObjectURL(): It Releases an object URL previously created by URL.createObjectURL(). You can call this method to free up memory once the object URL is no longer needed.
Example 1: In this example, we will parse the URL and see different parts of the URL. We will see the pathname, port number, and protocol.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Web API URL</title>
</head>
<body style="text-align: center;">
<h1 style="color:green">Welcome To GFG</h1>
<h2>URL details</h2>
<h2 id="ele"></h2>
</body>
<script>
const url = new URL(document.location.href);
document.getElementById("ele").innerHTML =
'<h3>Path Name: ' + url.pathname +
'</h3><h3>Port: ' + url.port +
'</h3>' + '<h3> Protocol ' +
url.protocol + '</h3>'
</script>
</html
Output:
Example 2: In this example, we change the URL component attribute, see host, hostname, and origin attribute of url component.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Web API URL</title>
</head>
<body style="text-align: center;">
<h1 style="color:green">Welcome To GFG</h1>
<p>
<button onclick="fun()">Get host</button>
<button onclick="fun2()">Get hostName</button>
<button onclick="fun3()">Get Full URL</button>
<button onclick="fun4()">Get UserName</button>
</p>
<h2 id="ele"></h2>
</body>
<script>
const url = new URL(document.location.href);
url.username = 'geeks1';
url.password = 'geek@123';
function fun() {
document.getElementById('ele').innerHTML =
'<h3>Host is : ' + url.host;
}
function fun2() {
document.getElementById('ele').innerHTML =
'<h3>Host Name is : ' + url.hostname;
}
function fun3() {
document.getElementById('ele').innerHTML =
'<h3>Full Url is : ' + url.origin;
}
function fun4() {
document.getElementById('ele').innerHTML =
'<h3>User Name is: ' + url.username;
}
</script>
</html>
Output:
Browser Support
- Chrome 32
- Edge 12
- Firefox 19
- Opera 19
- Safari 7
Similar Reads
How to Copy a Web Image's URL?
Have you ever come across an image on any website and faced problems copying the URL of the image and saving or sharing it with anyone? So this is the perfect article to land where you will get to know how to copy the image URL and share it with anyone. You can copy the URL of an image by following
4 min read
Web API URL.pathname Property
The Web API URL.pathname property is used to get USVString containing an initial “/†followed by the path of the URL. Syntax: var str = URL.pathname Return Value: This property returns a USVString containing the pathname of the URL. Note: If there is no path set for the URL, so it will Return only /
1 min read
Node.js URL.username API
URL.username is an inbuilt application programming interface(API) of the URL class within Node.JS. URL.username API is used to get and set the username of the URL. Syntax: url.username URL: It is an object created by a URL constructor. Example 1: (Getting the username of URL) C/C++ Code //Creating a
1 min read
Web Server and Its Types
A web server is a system—either software, hardware, or both—that stores, processes, and delivers web content to users over the Internet using the HTTP or HTTPS protocol. When a user’s browser sends a request (like visiting a website), the web server responds by delivering the appropriate resources s
7 min read
Node.js URL.href API
The url.href is an inbuilt application programming interface of class URL with in the url module which Gets and sets the serialized URL. Getting the value of the href property is equivalent to calling the url.toString() method.Setting the value of this property to a new value is equivalent to creati
2 min read
Node.js URL.hash API
The url.hash is an inbuilt application programming interface of class URL within url module which is used to get and set the fragment portion of the URL. Syntax: url.hash Return value: It gets and sets the fragment portion of the URL. Below programs illustrate the use of url.hash Method: Example 1:
1 min read
Node.js URL.host API
The url.host is an inbuilt application programming interface of class URL with in url module which is used to get and set the host portion of the URL. Syntax: const url.host Return value: It gets and sets the host portion of the URL.Below programs illustrates the use of url.host Method:Example 1: C/
1 min read
Node.js URL.port API
The url.port is an inbuilt application programming interface of class URL within url module which is used to get and set the port portion of the URL.the port value may be a number or a string containing a number in the range 0 to 65535 (inclusive). Setting the value to the default port of the URL ob
3 min read
Project Idea | Webents
In the world of ever-enhancing technology, it has become possible to learn anything from the comfort of one’s home. A college student receives hundreds of messages about workshops, webinars, etc. daily. Yet when it comes to finding the right learning resources at the right time, people can not help
2 min read
Node.js URL.fileURLToPath API
This URL.fileURLToPath function decodes the file URL to a path string and ensures that the URL control characters (/, %) are correctly appended/adjusted when converting the given file URL into a path. Syntax: url.fileURLToPath( url ) Parameters: This function accepts single parameter url which holds
1 min read