如何用 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。

更新于: 2023年1月18日

2K+ 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告