JavaScript正则表达式匹配URL
流程图
st=>start: 开始
e=>end: 结束
op1=>operation: 准备正则表达式
op2=>operation: 获取输入的URL
op3=>operation: 进行正则匹配
op4=>operation: 判断匹配结果
cond1=>condition: 匹配成功？
cond2=>condition: 匹配失败？
st->op1->op2->op3->op4->cond1
cond1(yes)->e
cond1(no)->cond2
cond2(yes)->e
cond2(no)->op2
步骤
| 步骤 | 描述 |
|---|---|
| 1 | 准备正则表达式 |
| 2 | 获取输入的URL |
| 3 | 进行正则匹配 |
| 4 | 判断匹配结果 |
代码示例
1. 准备正则表达式
// 创建正则表达式
const urlPattern = /^((http|https):\/\/)?([a-z0-9-.]+\.[a-z]{2,})(\/[a-zA-Z0-9-_.]+)*\/?(\?[a-zA-Z0-9-_.]+=[a-zA-Z0-9-_.]+(&[a-zA-Z0-9-_.]+=[a-zA-Z0-9-_.]+)*)?(#[a-zA-Z0-9-_.]+)?$/
这段代码创建了一个正则表达式，用于匹配URL。其中，正则表达式的含义如下：
^((http|https):\/\/)?：匹配URL的协议部分，可以是http://或https://，也可以没有。([a-z0-9-.]+\.[a-z]{2,})：匹配URL的域名部分，由字母、数字、连字符和点组成，最后必须是至少2个字母。(\/[a-zA-Z0-9-_.]+)*\/?：匹配URL的路径部分，由字母、数字、连字符、下划线和点组成，可以有多个，最后一个字符可以是斜杠，也可以没有。(\?[a-zA-Z0-9-_.]+=[a-zA-Z0-9-_.]+(&[a-zA-Z0-9-_.]+=[a-zA-Z0-9-_.]+)*)?：匹配URL的查询参数部分，由一个?开始，后面紧跟一个或多个键值对，每对之间用&分隔。(#[a-zA-Z0-9-_.]+)?：匹配URL的锚点部分，由一个#开始，后面跟着字母、数字、连字符和点组成的字符串。
2. 获取输入的URL
const url = prompt('请输入一个URL')
这段代码使用prompt函数弹出一个对话框，提示用户输入一个URL，并将用户输入的URL保存在url变量中。
3. 进行正则匹配
const isMatch = urlPattern.test(url)
这段代码使用正则表达式的test方法，将输入的URL与正则表达式进行匹配，返回匹配结果（true或false），并将结果保存在isMatch变量中。
4. 判断匹配结果
if (isMatch) {
console.log('URL匹配成功')
} else {
console.log('URL匹配失败')
}
这段代码根据匹配结果输出相应的信息，如果匹配成功，则输出"URL匹配成功"，否则输出"URL匹配失败"。
完整代码示例
// 创建正则表达式
const urlPattern = /^((http|https):\/\/)?([a-z0-9-.]+\.[a-z]{2,})(\/[a-zA-Z0-9-_.]+)*\/?(\?[a-zA-Z0-9-_.]+=[a-zA-Z0-9-_.]+(&[a-zA-Z0-9-_.]+=[a-zA-Z0-9-_.]+)*)?(#[a-zA-Z0-9-_.]+)?$/
// 获取输入的URL
const url = prompt('请输入一个URL')
// 进行正则匹配
const isMatch = urlPattern.test(url)
// 判断匹配结果
if (isMatch) {
console.log('URL匹配成功')
} else {
console.log
