JavaScript 如何判断 URL 是否合法

JavaScript判断URL是否合法的方法主要有以下几种：使用正则表达式匹配URL结构、利用HTML5新增的URL对象进行解析、或者通过在元素中设置href属性再检查其属性值。其中，正则表达式的方法因为可以详细定制检查规则，因此是相当灵活的方法，但需要注意正则的准确性和完整性以匹配各种URL的情况。

一、正则表达式判断URL

常用的JavaScript正则表达式判断URL合法性是设置一系列的规则以匹配不同格式的URI结构。下面是一个基础的正则表达式范例：

function isValidUrl(url) {
    const regex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
    return regex.test(url);
}

这个基本的正则表达式涵盖了协议、域名和路径。这种方法的优点是可以根据具体情况调整正则表达式，但劣势是难以适应所有的URL，特别是对于一些不标准的URL形式，可能需要编写更复杂的正则表达式。

二、利用HTML5的URL对象

HTML5引入的URL对象提供了解析和构建URLs的接口，可以用来判断一个URL的合法性：

function isValidUrl(url) {
    try {
        new URL(url);
        return true;
    } catch (e) {
        return false;
    }
}

在这个方法中，如果URL对象能够被成功创建，那么该URL被认为是合法的。这种方法的优点是不需要正则表达式，语法简单，而且能够准确地反映浏览器对URL的解析结果。

三、使用 元素判断URL

另外一种不常用但简便的方法是利用HTML的元素来解析URL：

function isValidUrl(url) {
    const anchor = document.createElement('a');
    anchor.href = url;
    return anchor.href === url;
}

该方法的本质是让浏览器尝试解析给定的URL，如果元素的href属性最终和输入的URL一致，那么这个URL被认为是合法的。但这种方法可能存在浏览器解析差异，因此在实际应用中准确性可能不如前两种方法。

四、综合方法

在实际的项目中，最可靠的做法可能是将以上几种方法结合起来使用，来达到最佳的效果。例如，首先使用正则表达式进行初步的格式验证，然后使用URL对象或元素的方法进行深入的解析验证。

function isValidUrl(url) {
    // 初步使用正则表达式验证
    const regex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
    if(!regex.test(url)) {
        return false;
    }
    // 使用URL对象进行验证
    try {
        new URL(url);
        return true;
    } catch (e) {
        return false;
    }
}

综合方法能兼顾正则表达式的灵活性和URL对象的准确性，建立起一道较为全面的URL合法性验证机制。

相关问答FAQs：

1. JavaScript 中如何检测一个URL是否合法？

可以使用正则表达式来检测一个URL是否合法。以下是一个示例代码：

function isURLValid(url) {
  var pattern = new RegExp('^(https?:\\/\\/)?'+ // 协议
    '((([a-zA-Z\\d]([a-zA-Z\\d-]{0,61}[a-zA-Z\\d])?)|' + // 域名第一部分
    '([a-zA-Z\\d.[a-zA-Z\\d-]]+))\\.)+[a-zA-Z]{2,13})' + // 域名第二部分
    '(\\:\\d{1,5})?' + // 端口
    '(\\/[-a-zA-Z\\d%@_.~+&:?#/=]*)?$'); // 路径参数
  return pattern.test(url);
}

这个函数接受一个URL作为参数并返回一个布尔值来表示是否合法。

2. 如何用 JavaScript 检查一个URL是否是一个有效的网址？

我们可以使用 try-catch 块来检查一个URL是否是一个有效的网址。以下是一个示例代码：

function isURLValid(url) {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
}

这个函数使用 new URL 构造函数来尝试解析给定的URL。如果解析成功，则说明URL是有效的网址，返回 true，否则返回 false。

3. 在 JavaScript 中如何快速判断一个URL是否合法？

可以使用字符串的 startsWith 方法来判断一个URL是否以 http:// 或 https:// 开头，以及以 .com、.org 等常见的域名后缀结尾。以下是一个示例代码：

function isURLValid(url) {
  return url.startsWith('http://') || url.startsWith('https://') &&
    (url.endsWith('.com') || url.endsWith('.org') || url.endsWith('.net'));
}

这个函数使用了字符串的 startsWith 和 endsWith 方法来进行快速判断。如果URL以合法的协议开头并以常见的域名后缀结尾，则返回 true，否则返回 false。