正确的正则表达式网站 URL 验证 - Javascript

在现代 Web 开发过程中，URL 是无法避免的一部分。 在表单验证和前端交互等方面，必须进行 URL 的验证。正确的 URL 格式很重要，因为它有助于防止攻击和注入，确保应用程序的安全性。

在 JavaScript 中，我们可以使用正则表达式来验证 URL 是否符合标准格式。下面介绍一些正则表达式和代码实例，演示如何在 JavaScript 中正确验证网站 URL。

标准的 URL 格式

标准的 URL 格式通常具有以下四个部分：

https://www.example.com/path/to/page.html?query=string
|     |                        |           |
scheme host                     path     query

其中：

• Scheme：URL 的协议部分，例如 https:// 或 http://。
• Host：URL 的主机名，例如 www.example.com。
• Path：URL 的路径，例如 /path/to/page.html。
• Query：URL 中的查询值，例如 query=string。

正则表达式

下面是一个可以验证标准 URL 格式的正则表达式：

const urlRegExp = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:localhost))(?::\d{2,5})?(?:[/?#]\S*)?$/i;

该正则表达式从开头到结尾都要匹配 URL。该正则表达式具有以下特征：

• 要么 https:// 要么 http:// 或 ftp:// 可选。
• 用户信息（例如用户名和密码）是可选的。
• IP 地址需要与标准格式匹配，否则会以 localhost 代替。
• 端口号是可选的。
• 查询和 fragment 中的字符是可选的。

实例

下面是一个基本的 JavaScript 函数定义，用于验证 URL。它将接收一个 URL 字符串作为参数，然后返回一个布尔值，指示 URL 是否为有效格式。

function isValidURL(url) {
  return urlRegExp.test(url);
}

使用

现在我们可以使用 isValidURL() 函数来验证 URL 是否格式正确。例如：

// 测试 URL 是否有效
const url = 'https://www.example.com/path/to/page.html?query=string';
const isValid = isValidURL(url);
console.log(isValid);

上面的例子将打印 true，因为 https://www.example.com/path/to/page.html?query=string 具有标准的 URL 格式。

结论

使用上述代码和正则表达式，我们可以轻松地验证 URL 是否为标准格式。要注意的是，如果您的应用程序需要特定的 URL 格式，则需要对上述代码进行修改，以便其更好地满足您的要求。