如何用 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。
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP