如何用 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。
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP