如何用 JavaScript 測試 URL 字串是絕對路徑還是相對路徑?


瞭解使用者在您的應用程式中輸入的是絕對路徑還是相對路徑,可以讓您根據內容的來源以及某些操作的處理方式做出決策。在本文中,我們將介紹如何使用 JavaScript 快速輕鬆地確定給定的 URL 字串是絕對路徑還是相對路徑。

絕對 URL 是一個包含查詢資源所需的所有資料的 URL。URL 開頭網站域中的協議(HTTPS)是包含在絕對 URL 中的元素。以下是絕對 URL 的語法

語法

https://tutorialspoint.tw/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.tw/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+ 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告