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