如何用 JavaScript 测试 URL 字符串是绝对路径还是相对路径?
了解用户在您的应用程序中输入的是绝对路径还是相对路径,可以让您根据内容的来源以及某些操作的处理方式做出决策。在本文中,我们将介绍如何使用 JavaScript 快速轻松地确定给定的 URL 字符串是绝对路径还是相对路径。
绝对 URL 是一个包含查找资源所需的所有数据的 URL。URL 开头网站域中的协议(HTTPS)是包含在绝对 URL 中的元素。以下是绝对 URL 的语法
语法
https://tutorialspoint.com/index.htm
相对 URL 是一个简短的 URL,包含域名和只能从同一服务器或页面访问的特定信息。
语法
以下是相对 URL 的语法
tutorialspoint.com/index
让我们深入了解本文,学习更多关于如何测试 URL 字符串是绝对 URL 还是相对 URL 的知识。要检查 URL 是绝对路径还是相对路径,我们使用正则表达式进行检查。
在 JavaScript 中使用正则表达式
HTTPS 协议包含在绝对 URL的开头。只需查看 URL 是否以https://开头即可。如果找到,则返回true,否则返回 false。
正则表达式是我们用来检查的(正则表达式)。
示例
在以下示例中,我们正在运行一个正则表达式来检查 URL 是绝对路径还是相对路径。
<!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>
当脚本执行时,它将生成一个包含用户输入字段和点击按钮的输出。当用户输入内容并点击按钮时,事件会被触发,并检查正则表达式;如果匹配,则返回值为绝对 URL;否则,返回值为相对 URL。
示例
让我们考虑另一个使用正则表达式的示例
<!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>
运行上述脚本后,事件会被触发,脚本使用正则表达式检查脚本中提到的 URL,并在网页上将第一个 URL 返回为绝对 URL,第二个 URL 返回为相对 URL。
使用 indexOf() 方法
要确定"://"的位置索引是否大于 0 或等于 0,请使用.indexOf()方法。通过这两个条件检查,我们都找到了绝对 URL。
示例
考虑以下示例,我们正在运行脚本以及.indexOf()来检查给定的数字是绝对 URL还是相对 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://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>
当脚本执行时,事件会被触发,它会检查脚本中给定的 URL 并显示它,无论是绝对 URL 还是相对 URL。在我们的例子中,当用户点击按钮时,它将显示给定的 URL 为绝对 URL。