前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >学习笔记-正则表达式[通俗易懂]

学习笔记-正则表达式[通俗易懂]

作者头像
全栈程序员站长
发布2022-08-04 08:37:02
2340
发布2022-08-04 08:37:02
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

参考

1.MDN正则表达式 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions 2.https://www.cnblogs.com/tugenhua0707/p/5037811.html

1 创建一个正则表达式

两种方法

方法1:使用一个正则表达式字面量,其由包含在斜杠之间的模式组成

代码语言:javascript
复制
const regex1 = /ab+c/; 
const regex2 = /^[a-zA-Z]+[0-9]*\W?_$/gi;

方法2:调用RegExp对象的构造函数

代码语言:javascript
复制
var regex1 = new RegExp("ab+c");
var regex2 = new RegExp(/^[a-zA-Z]+[0-9]*\W?_$/, "gi");
var regex3 = new RegExp("^[a-zA-Z]+[0-9]*\\W?_$", "gi");

2 支持正则表达式的String对象的方法

2.1 search()

用法:执行正则表达式和 String对象之间的一个搜索匹配

语法:str.search(regexp)

返回值:如果匹配成功,返回正则表达式在字符串中首次匹配项的索引。否则,返回 -1。

例:

代码语言:javascript
复制
var str = 'hello world,hello world'
console.log(str.search(/hello/)) // 0
console.log(str.search('world')) // 6
console.log(str.search(/123/))  // -1

2.2 match()

用法:当一个字符串与一个正则表达式匹配时, match()方法检索匹配项

语法:str.match(regexp)

返回值:如果字符串匹配到了表达式,会返回一个数组,数组的第一项是进行匹配完整的字符串,之后的项是用圆括号捕获的结果。如果没有匹配到,返回null。

例:

代码语言:javascript
复制
var str = "hello world"
console.log(str.match("hello")) // ["hello", index: 0, input: "hello world", groups: undefined]
console.log(str.match("Hello")) // null
console.log(str.match(/hello/)) // ["hello", index: 0, input: "hello world", groups: undefined]
// 全局匹配
var str2="1 plus 2 equal 3"
console.log(str2.match(/\d+/g)); //["1", "2", "3"]

2.3 replace()

用法:返回一个由替换值替换一些或所有匹配的模式后的新字符串。模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数。

语法:str.replace(regexp|substr, newSubStr|function)

例:

代码语言:javascript
复制
var str = "hello world";
// 替换字符串
var s1 = str.replace("hello","a");
console.log(s1);// a world
// 使用正则替换字符串
var s2 = str.replace(/hello/,"b");
console.log(s2); // b world

// 使用正则全局替换 字符串
var s3 = str.replace(/l/g,'');
console.log(s3); // heo word

// $1,$2 代表的是第一个和第二个子表达式相匹配的文本
// 子表达式需要使用小括号括起来,代表的含义是分组
var name = "xiao,yao";
var s4 = name.replace(/(\w+)\s*,\s*(\w+)/,"$2 $1");
console.log(s4); // "yao,xiao"
// $& 是与RegExp相匹配的子字符串
var name = "hello I am a chinese people";
var regexp = /am/g;
if(regexp.test(name)) {
    //返回正则表达式匹配项的字符串
    console.log(RegExp['$&']);  // am

    //返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符。
    console.log(RegExp["$'"]); // a chinese people

    //返回被查找的字符串从字符串开始的位置到最后匹配之前的位置之间的字符。
    console.log(RegExp['$`']);  // hello I 
    
    // 返回任何正则表达式查找过程中最后括号的子匹配。
    console.log(RegExp['$+']); // 空字符串

    //返回任何正则表达式搜索过程中的最后匹配的字符。
    console.log(RegExp['$_']);  // hello I am a chinese people
}

// replace 第二个参数也可以是一个function 函数
var name2 = "123sdasadsr44565dffghg987gff33234";
name2.replace(/\d+/g,function(v){
    console.log(v); 
    /*
     * 第一次打印123
     * 第二次打印44565
     * 第三次打印987
     * 第四次打印 33234
     */
});
/*
 * 如下函数,回调函数参数一共有四个
 * 第一个参数的含义是 匹配的字符串
 * 第二个参数的含义是 正则表达式分组内容,没有分组的话,就没有该参数,
 * 如果没有该参数的话那么第四个参数就是undefined
 * 第三个参数的含义是 匹配项在字符串中的索引index
 * 第四个参数的含义是 原字符串
 */
 name2.replace(/(\d+)/g,function(a,b,c,d){
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    /*
     * 如上会执行四次,值分别如下(正则使用小括号,代表分组):
     * 第一次: 123,123,0,123sdasadsr44565dffghg987gff33234
     * 第二次: 44565,44565,11,123sdasadsr44565dffghg987gff33234
     * 第三次: 987,987,22,123sdasadsr44565dffghg987gff33234
     * 第四次: 33234,33234,28,123sdasadsr44565dffghg987gff33234
     */
 });

2.4 split()

作用:使用指定的分隔符字符串将一个String对象分割成字符串数组,以将字符串分隔为子字符串,以确定每个拆分的位置。

语法:str.split([separator[, limit]])

例:

代码语言:javascript
复制
var str = "what are you doing?";
// 以" "分割字符串
console.log(str.split(" "));
// 打印 ["what", "are", "you", "doing?"]

// 以 "" 分割字符串
console.log(str.split(""));
/*
 * 打印:["w", "h", "a", "t", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", 
 * "g", "?"]
 */
// 指定返回数组的最大长度为3
console.log(str.split("",3));
// 打印 ["w", "h", "a"]

3 RegExp对象方法

3.1 test()

作用:执行一个检索,用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。

语法:regexObj.test(str) 返回:如果正则表达式与指定的字符串匹配 ,返回true;否则false。

例:

代码语言:javascript
复制
let str = "xiao and yao";
console.log(/xiao/.test(str)); // true
console.log(/xiaoxiao/.test(str)); //false

// 或者创建RegExp对象模式
let regexp = new RegExp("xiao");
console.log(regexp.test(str)); // true

3.2 exec()

作用:在一个指定字符串中执行一个搜索匹配。

语法:regexObj.exec(str)

返回:如果匹配成功,返回一个数组,并更新正则表达式对象的属性。返回的数组将完全匹配成功的文本作为第一项,将正则括号里匹配成功的作为数组填充到后面。 如果匹配失败,exec() 方法返回 null。

例:

代码语言:javascript
复制
let str = "xiao and yao";
console.log(/xiao/.exec(str)); 
// ["xiao", index: 0, input: "xiao and yao", groups: undefined]

console.log(/wo/.exec(str)); // null

4 正则表达式实战

4.1 匹配以数字结尾的正则

正则:/\d+$/g

4.2 去掉空格

代码语言:javascript
复制
let str = "我 是 肖 瑶"
console.log(str)    // 我 是 肖 瑶
console.log(str.replace(/\s+/g,'')) // 我是肖瑶

4.3 判断字符串是不是由数字组成

代码语言:javascript
复制
let str1 = "1234xixihaha"
let str2 = "7788"
let reg = /^\d*$/

console.log(reg.test(str1))     // false
console.log(reg.test(str2))     // true

4.4 电话号码

分析如下:

组成:区号-电话号码 或 区号-电话号码-分机号

区号正则:/\d{3,4}/

电话号码:/\d{7,8}/

分机号:/\d{3,4}/

完整的电话号码正则:/^\d{3,4}-\d{7,8}(-\d{3,4})?$/

4.5 手机号码

代码语言:javascript
复制
let str1 = "18688666688"
let str2 = "1234567890"
let reg = /^1[3|4|5|7|8][0-9]{9}$/
console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // false

4.6 删除字符串左右空格

代码语言:javascript
复制
let reg = /^\s+|\s+$/g
let str1 = "123 "
let str2 = " 123"
let str3 = " 123 "
console.log(str1.replace(reg,''))
console.log(str2.replace(reg,''))

4.7 限制文本框只能输入整数或小数(二位小数)

代码语言:javascript
复制
let reg = /^\d*\.?\d{0,2}$/
let str1 = .9
let str2 = 1.99
let str3 = "1a.99"

console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // false

4.8 匹配中文的正则

使用 Unicode

代码语言:javascript
复制
let reg = /[\u4E00-\u9FA5\uf900-\ufa2d]/g
console.log(reg.test("我是")) //true
console.log(reg.test("aa"))     // false

4.9 返回字符串中 中文字符的个数

分析: 使用replace方法把不是中文字符全部替换成空,返回被替换的字符,都是中文字符,计算长度

代码语言:javascript
复制
let str = "aaa肖瑶bbb嘻嘻哈哈111"
let reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g

let strChange = str.replace(reg,'')
console.log(strChange)      // 肖瑶嘻嘻哈哈
console.log(strChange.length)   // 6

4.9 IP地址

代码语言:javascript
复制
let reg = /^\d{1-3}\.\d{1-3}\.\d{1-3}\.\d{1-3}$/

4.10 匹配标签中的内容

比如匹配如代码 <ul><li>aaa</li><li>bbb</li></ul>

分析:想获取ul中的内容,可以对匹配的内容使用分组 [\s\S]+ 空白和非空白字符

代码语言:javascript
复制
let str1 = "<ul><li>aaa</li><li>bbb</li></ul>"
let reg = /<ul>([\s\S]+)<\/ul>/g
str1.match(reg)
console.log(RegExp.$1)  // <li>aaa</li><li>bbb</li>

4.11 身份证号码的匹配

匹配规则:身份证号码有15位或者18位,其中最后一位可能是X,其他全是数字

代码语言:javascript
复制
let reg = /^(\d{14}|\d{17})(\d|[xX])$/
let identity1 = "430304199701012787"
let identity2 = "43030419970101278X"
let identity3 = "43030419970101278a"

console.log(reg.test(identity1))    // true
console.log(reg.test(identity2))    // true
console.log(reg.test(identity3))    // false

4.12 IP地址

代码语言:javascript
复制
let reg = /^\d{1-3}\.\d{1-3}\.\d{1-3}\.\d{1-3}$/

4.13 邮箱的正则表达式

代码语言:javascript
复制
/^([a-zA-Z_0-9-])+@([a-zA-Z_0-9-])+(\.[a-zA-Z_0-9-])+$/

5 结语

文章若有错误,还望指正。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/107311.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 创建一个正则表达式
  • 2 支持正则表达式的String对象的方法
    • 2.1 search()
      • 2.2 match()
        • 2.3 replace()
          • 2.4 split()
          • 3 RegExp对象方法
            • 3.1 test()
              • 3.2 exec()
              • 4 正则表达式实战
                • 4.1 匹配以数字结尾的正则
                  • 4.2 去掉空格
                    • 4.3 判断字符串是不是由数字组成
                      • 4.4 电话号码
                        • 4.5 手机号码
                          • 4.6 删除字符串左右空格
                            • 4.7 限制文本框只能输入整数或小数(二位小数)
                              • 4.8 匹配中文的正则
                                • 4.9 返回字符串中 中文字符的个数
                                  • 4.9 IP地址
                                    • 4.10 匹配标签中的内容
                                      • 4.11 身份证号码的匹配
                                        • 4.12 IP地址
                                          • 4.13 邮箱的正则表达式
                                          • 5 结语
                                          领券
                                          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档