JavaScript URL 正则表达式
在开发 Web 应用程序时，我们经常需要验证和处理 URL。URL 是统一资源定位符的缩写，是用于定位和访问互联网上资源的地址。JavaScript 提供了正则表达式（RegExp）来处理 URL 字符串，并进行验证、解析和提取。
URL 的组成部分
一个标准的 URL 由以下几个部分组成：
- 协议（Protocol）：如
http、https、ftp等。 - 主机名（Hostname）：如
www.example.com。 - 端口号（Port）：可选，如
:80。 - 路径（Path）：如
/path/to/resource。 - 查询参数（Query）：可选，如
?key1=value1&key2=value2。 - 锚点（Fragment）：可选，如
#section1。
URL 的验证
我们可以使用正则表达式来验证 URL 是否符合规范。以下是一个验证 URL 的正则表达式：
const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
上述正则表达式的含义是以 http 或 https 或 ftp 开头，然后是 ://，接着是除空格、/、$、.、?、# 之外的任意字符，最后以非空白字符结尾。
下面是一个使用这个正则表达式进行 URL 验证的示例：
const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
function validateURL(url) {
return urlPattern.test(url);
}
console.log(validateURL(" // true
console.log(validateURL(" // true
console.log(validateURL("ftp://www.example.com")); // true
console.log(validateURL("invalidurl")); // false
console.log(validateURL(" // true
URL 的解析
除了验证 URL，我们还可以使用正则表达式来解析 URL 的各个组成部分。以下是一个解析 URL 的正则表达式：
const urlPattern = /^(https?|ftp):\/\/([^:\/\s]+)(:\d+)?(\/\S*)?$/i;
上述正则表达式的含义是以 http 或 https 或 ftp 开头，然后是 ://，接着是除冒号、斜杠和空白字符之外的字符作为主机名，然后是可选的冒号和数字作为端口号，最后是可选的斜杠和任意非空白字符作为路径。
下面是一个使用这个正则表达式进行 URL 解析的示例：
const urlPattern = /^(https?|ftp):\/\/([^:\/\s]+)(:\d+)?(\/\S*)?$/i;
function parseURL(url) {
const match = url.match(urlPattern);
if (match) {
const [, protocol, hostname, port, path] = match;
return { protocol, hostname, port, path };
}
return null;
}
console.log(parseURL(" // { protocol: "http", hostname: "www.example.com", port: undefined, path: undefined }
console.log(parseURL(" // { protocol: "https", hostname: "www.example.com", port: ":8080", path: undefined }
console.log(parseURL("ftp://www.example.com/path")); // { protocol: "ftp", hostname: "www.example.com", port: undefined, path: "/path" }
console.log(parseURL("invalidurl")); // null
URL 的提取
除了验证和解析 URL，我们还经常需要从 URL 中提取特定的信息，如查询参数。以下是一个提取查询参数的示例：
function extractQueryParams(url) {
const params = {};
const queryStart = url.indexOf("?");
if (queryStart !== -1) {
const queryString = url.substring(queryStart + 1);
const pairs = queryString.split("&");
pairs.forEach(pair => {
const [key, value] = pair.split("=");
params[key] = decodeURIComponent(value);
});
}
return params;
}
console.log(extractQueryParams(" // { name: "John", age: "30" }
console.log(extractQueryParams("
