正则表达式应用——实例应用 | 8月更文挑战

木子又又又又
387 阅读5分钟

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

巩固学习 javascript 基础知识，加深理解记忆，打牢地基才能盖高楼，加油！！！

用户名、密码等15个常用的js正则表达式

常识：

  • 正则由 / / 包裹
  • 点 . 表示一位任意字符，^表示开头，$表示结尾。
  • 检查字符串是否是这样的：4位字。 /^....$/
  • [ ] 表示罗列出这一位允许出现的东西：
  • 在[ - ]中短横表示一个区间范围，就是“到”：
    • [a-z] 表示允许出现小写字母
    • [0-9] 表示允许出现数字，等价于\d
  • 用{ }表示位数
    • {2,7}表示只有2~7位。
    • {0,1}等价于?，问号表示有0个或1个。
    • {0,}等价于*，型号表示有0个或多个。
  • 用反斜杠将这个字符“消歧义”，及 转义。

image.png

学习几个特殊表示法：

  • \d 表示所有数字，等价于[0-9]
  • \w 表示所有字母、数字、下划线，等价于[a-zA-Z0-9_]
  • \s 表示所有空格
  • \b 单词边界
  • \B 非单词边界
  • g 表示全局
  • i 不区分大小写

正则里的捕获

str.replace(/^\s*(.*?)[\s\n]*$/g, '$1') 中$1 是正则里的捕获，就是前面的(.*?)里的东西

// 可以优化成：
str.replace(/^\s+(.*?)\s+$/g, '$1')

//或者用：
str.replace(/^\s+|\s+$/g, "")

test 方法

语法：正则.test(字符串)

image.png

正则 不写 开头和结尾， 表示检查是否有4位部分。而不是就这4位。

捕获

match语法

语法：string.match(正则)

字符串可以打点调用match方法，表示寻找匹配的东西，要结合圆括号。圆括号就是捕获符号。

"a我爱你b么么哒c".match(/^a(.+)b(.+)c$/)

// ["a我爱你b么么哒c", "我爱你", "么么哒", index: 0, input: "a我爱你b么么哒c", groups: undefined]

结果是数组，第0项原字符串，第1项是第一个圆括号捕获的，第2项是第二个圆括号捕获的，以此类推……。

exec方法

语法：正则.exec(string)

如果要反过来，就是正则.字符串要用exec方法，结果是一样的。

/^a(.+)b(.+)c$/.exec("a我爱你b么么哒c")

// ["a我爱你b么么哒c", "我爱你", "么么哒", index: 0, input: "a我爱你b么么哒c", groups: undefined]

replace 方法

语法：string.replace(reg,'替换符')

'我喜欢羽毛球，而羽毛球爱睡觉'.replace(/羽毛球/g,'乒乓球');
// "我喜欢乒乓球，而乒乓球爱睡觉"

'abcdefeer'.replace(/e/gi,'☆');
//  "abcd☆f☆☆r"

/g修饰符表示全局，找到了还找。

i表示不区分大小写。

search 方法

search就是高级版的indexof，可以用正则。 返回匹配字符的index

'鹅鹅鹅鹅鹅鹅哈哈哈'.search(/哈.+/)
// 6

🌰 栗子

  1. 请将下面一段话中的美元金额，以汇率6.8换算为人民币。
// 好高兴啊，我买了一个iphoneX花了678美元，又买了一个鼠标，36美元，我又长高10厘米，真高兴啊。

const str2 = "好高兴啊，我买了一个iphoneX花了678美元，又买了一个鼠标，36.7美元，我又长高10厘米，真高兴啊。";

var ss = str.replace(/(\d+(\.\d+)?)美元/g , function(str , $1){
    return $1 * 6.8 + "元"
});

console.log(ss);
  1. 实现模板引擎。给你一个template： 问题：好{{xinqing}}啊！我买了一个{{dongxi}}，花了{{qian}}元，真{{xinqing}}啊！"
var template = "好{{xinqing}}啊！我买了一个{{dongxi}}，花了{{qian}}元，真{{xinqing}}啊！";

var dictionary = {
xinqing: "高兴",
dongxi: "手机",
qian: 800
}

var str = template.replace(/\{\{(\w+)\}\}/g , function(str , $1){
return dictionary[$1];
});

console.log(str); // 好高兴啊！我买了一个手机，花了800元，真高兴啊！

image.png

  1. 从网址中提炼/index/news/gudian，提炼news。
console.log("/index/news/gudian".match(/\/index\/(\w+)\/(\w+)/)[1]); 
// news 
console.log("/index/news/gudian".match(/\/index\/(\w+)\/(\w+)/)[2]); 
// gudian
  1. 提取标签中的文本
var str = '你好<p class="adsf asdf f" id="dfd" data-sd="3">please pick me</p>你好';
console.log( str.match(/\<[^\>]+\>([^\<]+)\<\/[^\>]+\>/)[1])
// please pick me
  1. 去除html标签
var str = '你好<p class="adsf asdf f" id="dfd" data-sd="3">please pick me</p>你好';
console.log(str.replace(/<[^<>]+>/g,''))
// "你好please pick me你好"
  1. 请给字符串添加一个guizheng方法，能够去掉字符串的首尾空格。
String.prototype.guizheng = function(){
    return this.replace(/^\s+(.+?)\s+$/g,function(str , $1){
        return $1;
    })
}
console.log("      asdfadsfasdf         ".guizheng() + "啊啊啊啊啊啊");
// asdfadsfasdf啊啊啊啊啊啊

? 可以让捕获变为“非贪婪模式”。

  1. 给字符串”23423453454365456”加千分位符号，变为“23,423,453,454,365,456”

找一个非单词边界，到结尾是1组或多组3个数字。 "23424324324234234".replace(/\B(?=(\d{3})+)/g,",");(?=)/g , ","); (?= )叫做“位置定语从句”，也叫作反向查找，描述到结尾的情况。

image.png

常用🌰 栗子

  1. 验证用户名和密码：（"^[a-zA-Z]\w{5,15}$"）正确格式："[A-Z][a-z]_[0-9]"组成,并且第一个字必须为字母6~16位；

  2. 验证电话号码：（"^(\d{3,4}-)\d{7,8}$"）正确格式：xxx/xxxx-xxxxxxx/xxxxxxxx；

  3. 验证手机号码："^1[3|4|5|8][0-9]\d{8}$"；

  4. 验证身份证号（15位或18位数字）："\d{17}[[0-9],0-9xX]"；

  5. 验证Email地址：("^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$")；

  6. 只能输入由数字和26个英文字母组成的字符串：("^[A-Za-z0-9]+$") ;

  7. 整数或者小数：^[0-9]+.{0,1}[0-9]{0,2}$

  8. 只能输入数字："^[0-9]*$"。

  9. 只能输入n位的数字："^\d{n}$"。

  10. 只能输入至少n位的数字："^\d{n,}$"。

  11. 只能输入m~n位的数字："^\d{m,n}$"。

  12. 只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"。

  13. 只能输入有两位小数的正实数："^[0-9]+(.[0-9]{2})?$"。

  14. 只能输入有1~3位小数的正实数："^[0-9]+(.[0-9]{1,3})?$"。

  15. 只能输入非零的正整数："^+?[1-9][0-9]*$"。

  16. 只能输入非零的负整数："^-[1-9][]0-9"*$。

  17. 只能输入长度为3的字符："^.{3}$"。

  18. 只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"。

  19. 只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"。

  20. 只能输入由26个小写英文字母组成的字符串："^[a-z]+$"。

  21. 验证是否含有^%&',;=?\"等字符："[^%&',;=?\x22]+"。

  22. 只能输入汉字："^[\u4e00-\u9fa5]{0,}$"。

  23. 验证URL："^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$"。

  24. 验证一年的12个月："^(0?[1-9]|1[0-2])$"正确格式为："01"～"09"和"1"～"12"。

  25. 验证一个月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为；"01"～"09"和"1"～"31"。

  26. 获取日期正则表达式：\d{4}[年|-|.]\d{\1-\12}[月|-|.]\d{\1-\31}日? 评注：可用来匹配大多数年月日信息。

  27. 匹配双字节字符(包括汉字在内)：[^\x00-\xff] 评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

  28. 匹配空白行的正则表达式：\n\s*\r 评注：可以用来删除空白行

  29. 匹配HTML标记的正则表达式：<(\S*?)[^>]>.?</>|<.*? /> 评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

  30. 匹配首尾空白字符的正则表达式：^\s*|\s*$ 评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

  31. 匹配网址URL的正则表达式：[a-zA-z]+://[^\s]* 评注：网上流传的版本功能很有限，上面这个基本可以满足需求

  32. 匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 评注：表单验证时很实用

  33. 匹配腾讯QQ号：[1-9][0-9]{4,} 评注：腾讯QQ号从10 000 开始

  34. 匹配中国邮政编码：[1-9]\d{5}(?!\d) 评注：中国邮政编码为6位数字

  35. 匹配ip地址：((2[0-4]\d|25[0-5]|[01]?\d\d?).){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)

avatar
文章
阅读
粉丝