JavaScript——正则表达式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42133358/article/details/124272229

JavaScript学习笔记（三）——正则表达式

正则表达式(Regular Expression)是一门独立的学科，Java语言支持、C语言支持、JavaScript中也支持；

正则表达式是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）；

正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串；

主要用在字符串格式匹配方面。

0x01 常见的正则表达式符号

元字符

.匹配换行符以外的任意字符
\w匹配字母或数字或下划线或汉字
\s匹配任意的空白字符
/d匹配数字
\b匹配单词的开始或结束
^匹配字符串的开始
$匹配字符串的结束

限定符

*重复两次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复n次
{n，}重复n次或更多次
{n，m}重复n到m次

反义代码

\W匹配不是字母或数字或下划线或汉字
\S匹配任意不是空白字符的字符
/D匹配任意非数字的字符
\B匹配不是单词的开始或结束的位置
^x匹配除了x以外的任意字符
^aeiou匹配除了aeiou这几个字母以外的任意字符

正则表达式中的()优先级较高。

[1,9]表示1到9的任意1个数字（次数是1）

[A-Za-z0-9]表示A-Za-z0-9中的任意一个字符

|表示或者

0x02 创建正则表达式对象

在JavaScript中创建正则表达式的语法格式：

第一种方式：

var regExp = /正则表达式/flags;

第二种方式：使用内置支持类RegExp

var regExp = new RegExp("正则表达式","flags");

关于flags可以取的值：

g：全局匹配；
i：忽略大小写;
m：多行搜索（ES规范制定之后才支持），如果前面是正则表达式时不能使用m，只有当前面是普通字符串时才可以使用。

0x04 正则表达式的`test()`函数

正则表达式的test()函数的语法格式：

正则表达式对象.test(用户填写的字符串)

返回值为true时表示字符串匹配成功；

返回值为false时表示字符串匹配失败。

例如：验证邮箱是否合法

html代码

<body>
    <input type="text" id="email" />
    <span id="emailError" style="color: red;font-size: 12px;"></span><hr>
    <input type="button" id="mybt" value="验证" />
</body>

JavaScript代码

window.onload = function() {
    document.getElementById("mybt").onclick = function() {
        var email = document.getElementById("email").value;
        var emailRegExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        var ok = emailRegExp.test(email);
        if(!ok) {
            document.getElementById("emailError").innerText="邮箱地址不合法！";
        } else {
            document.getElementById("emailError").innerHTML="<font color='green' size=3px>√</font>"
        }
    }
    document.getElementById("email").onfocus = function() {
        document.getElementById("emailError").innerText = "";
    }
}

当邮箱格式正确时，会提示√；当邮箱格式错误时会提示邮箱地址不合法!

0x03 去除字符串前后空白

利用trim()函数可以去除字符串前后空白，例如：

html代码

<body>
    <input type="text" id="username" />
    <input type="button" id="mybt" value="获取用户名" />
</body>

JavaScript代码

window.onload = function() {
    document.getElementById("mybt").onclick = function() {
        var username = document.getElementById("username").value.trim();//去除前后空白
        alert("--->" + username + "<---")
    }
}