JavaScript | Check whether a URL string is absolute or relative
The task is to check if the passed URL is absolute or relative. Below are the few approaches:
Approach 1:
- Use Regular Expression which checks if the URL contains “//” at a position in the URL .
- Before clicking on the button:
- After clicking on the button:
- Use .indexOf() method to get to know if the position of “://” has index greater than 0 or position of “//” has index equal to 0. Both these condition check leads us to the absolute URL.
- Before clicking on the button:
- After clicking on the button:
Example 1: This example uses the approach discussed above.
<!DOCTYPE HTML> < html > < head > < title > Test if a URL string is absolute or relative? </ title > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color: green" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style="font-size: 20px; font-weight: bold;"> </ p > < button onclick = "gfg_Run()" > Click Here </ button > < p id = "GFG_DOWN" style="color:green; font-size: 26px; font-weight: bold;"> </ p > < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var URL = "https://geeksforgeeks.org"; el_up.innerHTML = "Click on the button to check if the URL is relative or"+ " Absolute.< br >URL = '" + URL + "'"; function gfg_Run() { var RgExp = new RegExp('^(?:[a-z]+:)?//', 'i'); if (RgExp.test(URL)) { el_down.innerHTML = "This is Absolute URL."; } else { el_down.innerHTML = "This is Relative URL."; } } </ script > </ body > </ html > |
Output:
Approach 2:
Example 2: This example uses the approach discussed above.
<!DOCTYPE HTML> < html > < head > < title > Test if a URL string is absolute or relative? </ title > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color: green" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 20px; font-weight: bold;" > </ p > < button onclick = "gfg_Run()" > Click Here </ button > < p id = "GFG_DOWN" style="color:green; font-size: 26px; font-weight: bold;"> </ p > < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var URL = "/myfolder/test.txt"; el_up.innerHTML = "Click on the button to check if the URL is"+ " relative or Absolute.< br >URL = '" + URL + "'"; function gfg_Run() { 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 > |
Output: