JavaScript匹配URL的正则表达（包含中文）如何去写

JavaScript匹配包含中文的URL的正则表达式通常包括协议、域名、路径、查询字符串、锚点等元素。一个基本的正则表达式可表达为：/^(https?|ftp):\/\/(\w+\.)+[\w\.]+(\/[\w\-\u4e00-\u9fa5]*)*\/?(\?[\w\-\u4e00-\u9fa5%=&]*)?(#\w*)?$/i。该表达式判断协议是否合法，检查域名中是否有中文字符、路径、查询参数或锚点。中文字符使用 Unicode 范围 \u4e00-\u9fa5 进行匹配，以确保URL可以包含中文路径或参数。

下面，我们将详细解构并解释每个部分的正则表达式的组成，以及匹配中文URL的相关技巧。

一、正则表达式结构

协议匹配

/^(https?|ftp):\/\//

该表达式匹配 URL 的起始部分，判断它是 HTTP、HTTPS 还是 FTP 协议。其中 https? 表示匹配 "http" 或 "https"，后面的 |ftp 表示或者是 "ftp" 。

域名匹配

(\w+\.)+[\w\.]+

域名部分从 www 开始逐级匹配，使用 \w+ 匹配如 "www" 或 "subdomAIn"，每个域名的分隔用点号 . 表示，而最后 \w+ 匹配顶级域名如 "com"、"org"。

路径匹配

(\/[\w\-\u4e00-\u9fa5]*)*\/?

这一部分匹配 URL 中的路径，可以包含字母、数字、"-"、下划线，以及中文字符。\u4e00-\u9fa5 表示中文字符的 unicode 范围。结尾的 * 表示路径可以出现任意多次，包括零次。

查询参数匹配

(\?[\w\-\u4e00-\u9fa5%=&]*)?

URL 中的查询字符串以问号 ? 开头，可包含中文字符、英文字符、数字、% （百分号，通常是编码后的字符）、= （等号，用于键值对）和 & （和号，用于分隔键值对）。? 表示该部分可选。

锚点匹配

(#\w*)?

匹配 URL 中的锚点，以井号 # 开始，其后可以跟任意数量的字母数字字符。使用 ? 声明锚点为可选部分。

二、匹配中文字符的注意事项

中文字符编码

中文字符在 URL 中通常以百分号编码 % 开头。在使用正则表达式匹配中文 URL 时，需要考虑编码后的情况。URL 编码使用 % 后跟两位十六进制数表示字符。

正则表达式修饰符

使用 /i 修饰符可以使正则表达式对大小写不敏感，同时 \w 已经包含了字母、数字、下划线。

Unicode 字符范围匹配

在匹配中文字符时，使用 \u4e00-\u9fa5 可以匹配大部分汉字字符集。注意，随着 Unicode 的扩展，可能需要根据具体情况调整 Unicode 范围以匹配更广泛的字符。

三、JavaScript中的使用方法

创建正则表达式

创建正则表达式对象，采用字面量形式或构造函数形式：

let regex = /^(https?|ftp):\/\/(\w+\.)+[\w\.]+(\/[\w\-\u4e00-\u9fa5]*)*\/?(\?[\w\-\u4e00-\u9fa5%=&]*)?(#\w*)?$/i;
// 或者
let regex = new RegExp("^(https?|ftp):\\/\\/(\\w+\\.)+[\\w\\.]+(\\/[\\w\\-\\u4e00-\\u9fa5]*)*\\/?(\?[\\w\\-\\u4e00-\\u9fa5%=&]*)?(#\\w*)?$", "i");

使用正则表达式

使用 test 方法进行匹配测试：

let url = "http://www.example.com/路径/到/资源?参数=值&另一个参数=另一个值#锚点";
let isMatch = regex.test(url);
console.log(isMatch); // 输出 true 或 false

转义字符

在正则表达式中，某些特殊字符需要使用反斜杠进行转义，以便表示其字面意义，例如 \.、\? 等。

四、综合示例

为了使您清楚如何使用上面构造的正则表达式，下面是一个具体的 JavaScript 代码示例，展示如何验证一个包含中文的 URL 是否有效。

// 创建正则表达式
let regex = /^(https?|ftp):\/\/(\w+\.)+[\w\.]+(\/[\w\-\u4e00-\u9fa5]*)*\/?(\?[\w\-\u4e00-\u9fa5%=&]*)?(#\w*)?$/i;
// 测试 URL
let testUrls = [
    "http://www.example.com/",
    "https://www.example.cn/页面",
    "ftp://a.b.com/%E4%B8%AD%E6%96%87?查询=参数",
    "https://错误.域名.com/path/to/resource?query=测试#anchor"
];
// 输出验证结果
testUrls.forEach(url => {
    console.log(`URL: "${url}" is ` + (regex.test(url) ? "valid" : "invalid"));
});