Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to test if a URL string is absolute or relative - JavaScript?
Knowing whether or not a user has entered an absolute or relative path in your application allows you to make decisions regarding where content should be pulled from, and how certain actions should be handled. In this article, we'll go over how to use JavaScript to quickly and easily determine if a given URL string is absolute or relative.
Absolute Url is a URL that includes all the data necessary for finding the resources. The protocol (HTTPS) in the site's domain at the beginning of the URL is the element that is included in the absolute URL. Following is the syntax for Absolute Url
Syntax
https://www.tutorialspoint.com/index.htm
Relative Url is a brief URL that contains the domain name and specific information that can only be accessed from the same server or page.
Syntax
Following is the syntax for Relative Url
tutorialspoint.com/index
Let’s dive into the article to learn more about how to test if a url string is absolute or relative url. To check the Url absolute or regular we use regular expression to check.
Using regular expression in JavaScript
The HTTPS protocol is included in the beginning of an absolute URL. Simply look to see if the URL begins with https:// or not. We return true if it is found, otherwise, false.
Regex is what we use to check (regular expression).
Example
In the following example we are running a regular expression to check whether the url is absolute or relative.
<!DOCTYPE html>
<html>
<body>
<form action="#">
<label for="#">Input The URL</label>
<input type="text" id="url">
<input type="button" onclick="check()" value="Click">
<h2 id="result"></h2>
</form>
<script>
function check() {
let urls = document.getElementById('url').value;
let result = document.getElementById('result');
var pattern = /^https:\/\//i;
if (pattern.test(urls)) {
result.innerText = "Absolute Url";
}
else {
result.innerText = "Relative Url";
}
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an input field for the user along with a click button. When the user enters the input and clicks the button, the event is triggered and the regex expression is checked; if it matches, the value is returned as an absolute url; otherwise, the value is returned as a relative url.
Example
Let’s consider the another example, using the regular expression
<!DOCTYPE html>
<html>
<body>
<script>
var regularExpressionForURL = /^https?:\/\//i;
var originalURL1 = "https://www.example.com/index";
var originalURL2 = "/index";
if (regularExpressionForURL.test(originalURL1)) {
document.write("This is absolute URL" + "<br>");
}
else {
document.write("This is relative URL");
}
if (regularExpressionForURL.test(originalURL2)) {
document.write("This is absolute URL");
}
else {
document.write("This is relative URL");
}
</script>
</body>
</html>
On running the above script, the event gets triggered, and the script checks the url mentioned in the script using a regex expression and returns the first url as an absolute and the second url as a relative url on the webpage.
Usingthe indexOf() method
To determine whether the position of "://" has an index greater than 0 or equal to 0, use the.indexOf() method. We reach the absolute URL thanks to both of these condition checks.
Example
Considering the following example, we are running script along with .indexOf() to check the given number is absolute url or relative url.
<!DOCTYPE HTML>
<html>
<body style="text-align:center;">
<p id="tutorial" style="font-size: 20px; font-weight: bold;"></p>
<button onclick="check()">
Click Here
</button>
<p id="tutorial1"
style="color:green;
font-size: 26px;
font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("tutorial");
var el_down = document.getElementById("tutorial1");
var URL = "https://www.tutorialspoint.com/index.htm";
el_up.innerHTML = "Click to check if the URL is"+ " relative or Absolute.<br>URL = '" + URL + "'";
function check() {
if (URL.indexOf('://') > 0 || URL.indexOf('//') === 0) {
el_down.innerHTML = "This is Absolute URL.";
} else {
el_down.innerHTML = "This is Relative URL.";
}
}
</script>
</body>
</html>
When the script gets executed, the event gets triggered, and it checks the given url in the script and displays it, whether it was an absolute url or a relative url. In our case, it will display the given url as an absolute url when the user clicks the button.
2K+ Views
