JavaScript 如何判断 URL 是否合法

目录

一、使用正则表达式验证 URL：

二、利用HTML5的URL对象

三、使用元素判断URL

四、最靠谱方法

---

一、使用正则表达式验证 URL：

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合法性验证机制。