Contents
  1. 前言
  2. 题目描述
  3. 解答①
  4. 解答② 更简洁的URL合法性检测
  5. 更完整、更通用的URL合法性检测 正则表达式
  6. 自编URL检测 正则表达式

前言

本文将从一道JS基础题入手，复习一下正则表达式相关的知识点。

题目描述

请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否为合法的URL格式。注意：1. 协议仅为HTTP(S)

解答①

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>

        <script type="text/javascript">
            const _isUrl = url => {
                // 补全代码
                return /^https?:\/\/[a-z0-9A-Z_$][\w-]*(\.[\w-]+)+(\:\d+)?(\/\w+)*(\?\w+=.*(\&\w+=.*)*)?/g.test(url);
            }
        </script>
    </body>
</html>

解答② 更简洁的URL合法性检测

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>

        <script type="text/javascript">
            const _isUrl = url => {
                // 补全代码
                return /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i.test(url);
            }
        </script>
    </body>
</html>

解析

  • /^...$/i: 正则表达式的起始符号和结束符号，表示整个正则表达式的范围。其中 ^ 表示匹配字符串的开始位置，$ 表示匹配字符串的结束位置，i 是一个修饰符，表示忽略大小写。
  • (https?|ftp): 一个分组，使用 | 分隔，表示两种可能的情况。https? 表示匹配以 "http" 开头的字符串，后面的 s 可能存在也可能不存在，ftp 表示匹配 "ftp"。
  • :\/\/: 匹配一个冒号和两个斜杠，用来匹配 URL 中的协议部分。
  • .: 匹配除换行符之外的任意一个字符。
  • [^\s]*: *表示匹配零个或多个前面的元素，[^\s]* 表示匹配任意多个非空白字符。
  • /i: 正则表达式的修饰符，i 表示忽略大小写。

综合起来，该正则表达式用于匹配以 "http" 或 "https" 或 "ftp" 开头的 URL，后面跟着一个冒号和两个斜杠，然后是任意非空白字符，最后以任意多个非空白字符结尾。它可以用来验证一个字符串是否符合 URL 的格式。

Footnotes
一个字符类，用方括号括起来。^ 在字符类内表示取非，[^\s] 表示匹配任意非空白字符，[/$.?#] 表示匹配任意一个斜杠、问号、点号或井号。 ↩

更完整、更通用的URL合法性检测 正则表达式

/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/

自编URL检测 正则表达式

/^(https?|ftp):\/\/[^\s/$.?#]*[^\s/$.$].[^\s]*$/i

后面可根据需要换成/gi

在字符串中匹配到一个有效的URL

/https?:\/\/[^\s/$.?#]*[^\s/$.$].[^\s]*/gi

效果展示

%E6%88%AA%E5%B1%8F2023-05-29%2015.33.12.png

解析

/^(https?|ftp):\/\/[^\s/$.?#]*[^\s/$.$].[^\s]*$/i
  • 正则表达式匹配串以 /开始，以修饰符 /i结束
    • 全局搜索 -g
    • 忽略大小写 -i
    • 多行模式 -m
    • 包含换行符 -s
  • (A|B)表示这块儿是A或是B
  • abc?表示ab或abc
  • 用转义字符 \/\/来表示两个斜杠，即//
  • a$ 中的 $ 修饰前面的字符或字符类，表示“在结尾的”，比如这里表示“在结尾的a”
  • ^a 中的 ^ 修饰前面的字符或字符类，表示“在开头的”，比如这里表示“在开头的a”
  • []表示一个字符类
    • 在正则表达式中，方括号 [] 表示一个字符类（Character Class），用于匹配一个字符的集合。在字符类中，可以列出多个字符或字符范围，表示匹配其中任意一个字符
    • [abc] 匹配字符 'a'、'b' 或 'c'
    • [0-9] 匹配任意一个数字字符
    • [A-Za-z] 匹配任意一个字母字符（大小写不限）
    • [^abc] 使用 ^ 在字符类开头表示取反，表示匹配除了字符 'a'、'b' 和 'c' 之外的任意一个字符
    • 在字符类中，可以使用多个字符或字符范围，它们之间不需要分隔符。其中的特殊字符如 ^、-、[、] 、 $等需要进行转义，可以使用反斜杠 \ 进行转义，如匹配$用 \$
  • [^\s/$.?#]表示匹配一个字符，这个字符不是以下任意一种字符：空白字符(\s)、在结尾的斜杠（ /$）、符号 . 、符号 ? 、符号 #
  • * 表示匹配零次或多次前面的字符或字符类

特殊符号小结

.：匹配任意字符。例如，正则表达式 a.b 可以匹配 "aab"、"axb"、"a%b" 等。

*：匹配前面的字符零次或多次。例如，正则表达式 ab*c 可以匹配 "ac"、"abc"、"abbc"、"abbbc" 等。

+：匹配前面的字符一次或多次。例如，正则表达式 ab+c 可以匹配 "abc"、"abbc"、"abbbc" 等，但不能匹配 "ac"。

?：匹配前面的字符零次或一次。例如，正则表达式 colou?r 可以匹配 "color" 或 "colour"。

{}：用于指定匹配次数的量词。例如，正则表达式 [0-9]{3} 可以匹配三位数字。

[]：用于定义字符类。例如，正则表达式 [abc] 可以匹配 "a"、"b" 或 "c"。

()：用于分组。例如，正则表达式 (ab)+ 可以匹配 "ab"、"abab"、"ababab" 等。

|：用于表示逻辑或。例如，正则表达式 cat|dog 可以匹配 "cat" 或 "dog"。

\：用于转义特殊字符。例如，要匹配特殊字符 .，可以使用正则表达式 \.。

\d：匹配任何一个数字字符，等同于 [0-9]。

\D：匹配任何一个非数字字符，等同于 [^0-9]。

\b：匹配单词边界。通常用于确保匹配的数字是一个完整的单词或数字串的一部分。

\B：匹配非单词边界。

\w：匹配单词字符，包括字母、数字和下划线，等同于 [A-Za-z0-9_]。

\W：匹配非单词字符。

\s：匹配空白字符，包括空格、制表符、换行符等。

\S：匹配非空白字符。

A Student on the way to full stack of Web3.