【笔记】正则笔记

表达字符：
	[0-9] : 单个数字
	[0-9]+ : 1或n个数字
	[0-9]{3} : 3位长度的数字
	[0-9]{1,11} : 1到11位长度的数字
	[0-9]{3,} : 至少3位长度的数字
	[\u4e00-\u9fa5] : 单个中文字符
	[\u4e00-\u9fa5]{1,2} : 1到2位长度的中文字符；也有直接用中文的：var string = "2019年08月16日";var res = string.replace(/年|月/g,".").replace(/日/,"");console.log(res);
	\w : 单个数字、字母、下划线；等同于[0-9a-zA-Z_],单个字母用[a-zA-Z],只能纯数字或纯字母或结合[0-9a-zA-Z]
	\d : 单个数字；等同于[0-9]
	\D : 单个任何非数字字符；等同于[^0-9]
	\s : 单个任何空白字符，包括空格、换页符、换行符、回车符、制表符、垂直制表符、等等；等价于 [ \f\n\r\t\v]
	\S : 单个任何非空白字符；等价于 [^ \f\n\r\t\v]
	\b : 一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'
	\B : 一个非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'
	i  : 表示不区分大小写，一般是写着表达式的结尾符号/后面的
	g  : 表示查找到尽可能多的匹配，一般是写着表达式的结尾符号/后面的
    postscript:
    匹配：Reg.test(String);匹配的时候Reg一般都是要以^开头，以$为结束，才能更准确匹配，但不是必须写的，只有"//"符号才是必须的
    提取: String.match(Reg);提取的时候Reg一般不用^$符号，才能从字符串的任意位置开始提取


特殊字符：
	+ : 前面的字符1或者n次；等价于{1,}
	? : 前面的字符0或者1次；等价于{0,1}
	* : 前面的字符0或者n次；等价于{0,}
	. : 单个除换行符\n之外的任何字符。要匹配包括 '\n' 在内的任何字符，请使用像"(.|\n)"的模式
	| : 指明两项之间的一个选择
	(): 标记一个子表达式的开始结束位置
	^ : 匹配输入字符串的开始位置；如果是在方括号表达式中使用，此时它表示不接受该字符集合，如[^/: ]表示除了/符号跟:符号以及空格之外的任何单个字符串
    $ : 匹配输入字符串的结束为止。
    postscript:
    以上属于特殊字符，如果要查找，需要在前面加\符号转义。如/^abc\.js$/可以匹配成功abc.js



小测试：
    var string = "<H1>Test 1 - 介绍正则表达式</H1>";
    var regTest = /<\w+>/;
    console.log(regTest.test(string));
    console.log(string.match(/([\u4e00-\u9fa5])/g));//提取中文内容
    console.log(string.replace(/<[^>]+>/g, ""));//去除html标签，[^>]表示除了>符号外的任何单个字符


// 匹配js、json、html等后缀的文件
//var regTest = /^(\w*\/)*(\w+\.)+(js(on)?|html)$/;
//var regTest = /^(\w*\/)*(\w+(\-)?\w*\.)+(js(on)?|html)$/;
//var regTest = /^(\w*\/)*(\w+(\-)?\w+\.)+(js(on)?|html)$/;

//var regTest = /^(((\-)?)+\w+((\-)?(\w)?)?)+\.+(js(on)?|html)$/;
//var regTest = /^(((\-)?\w)+((\-)?(\w)?)?)+\.(js(on)?|html)$/;
//var regTest = /^.*\.(js(on)?|html)$/;

用正则获取安卓版本

var str = navigator.userAgent;
var reg = /Android\s*(\d+(\.\d+)?(\.\d+)?)[;]/i;
var arr = str.match(reg);
console.log(arr);
console.log("安卓版本是：" + arr[1]);

实例场景1：日期中的中文替换成某个符号或者删除

var string = "2020年09月10日";
var res1 = string.replace(/年|月/g, "."); //2020.09.10日
var res2 = res1.replace(/日/g, "");       //2020.09.10
console.log(res2);

实例场景2：对邮箱内容是否为空以及填写格式是否正确的一个正则判断

var mailVal = "1234@qq.com";
var regTest = /^\s+$/; //请注意，这里一定要有^$符号，否则仅中间有空格也会被视为没填邮箱
if (regTest.test(mailVal) || mailVal == ""){
    alert("请填写邮箱地址");
} else {
    regTest = /^\w+@\w+\.\w+$/;
    if (regTest.test(mailVal)) {
        console.log(mailVal);
    } else {
        alert("邮箱地址有误！");
    }
}

 

实例场景3：匹配一个数字，范围是10万-1亿的，最多2位小数点

var inputValue = "1000000.23";
var regTest = /^[1][0]{8}(\.[0]{1,2})?$|^[1-9][0-9]{5,7}(\.[0-9]{1,2})?$/;
console.log(regTest.test(inputValue);

分解：
1、首先考虑最大值1亿
    规律：以1开头，非首位的整数位均为0，且小数点位上面的值也必须为0，小数点位数最大为2
    结果：/^[1][0]{8}(\.[0]{1,2})?$/
2、中间的值：
    规律：以非0自然数开头，整数的位数是6~8位，小数点位数最大为2
    结果：/^[1-9][0-9]{5,7}(\.[0-9]{1,2})?$/

 

实例场景4：通过正则给关键词加高亮样式

场景: 用户输入关键词inputWord，后端返回数据列表，前端从列表中搜索关键词inputWord替换成高亮颜色结构（加样式）

bug: 如果用户输入的inputWord包含英文格式括号的话，正则匹配就会出问题

解决方案：

var inputWord = "(搜索关键词)  ";                     //假设用户搜索里面带有英文括号和空格         
var searchWord1 = inputWord.replace(/\s*/g, "");    //去掉空格的干扰
var searchWord2 = searchWord1.replace(/\(/g, "\\(");//去掉英文左括号的干扰
var searchWord3 = searchWord2.replace(/\)/g, "\\)");//去掉英文右括号的干扰
var Reg = new RegExp("(" + searchWord3 + ")", "g"); //设置正则的规则

for (var i = 0; i < res.length; i++) {
    if (res[i].desc.indexOf(searchWord1) > -1) {    //找到关键词加一个有样式的标签
        var addCssDesc = res[i].desc.replace(Reg, "<span style='color:#ff6430'>$1</span>");
        res[i].desc = addCssDesc;
    }
}

 

实例场景5：贪婪模式与惰性模式

var str1 = "哈哈哈 <a>第一个a标签的内容</a> 呵呵呵 <a>第二个a标签的内容</a>";
var str2 = "哈哈哈 <a>第一个a标签的内容</a> 呵呵呵 <a>第二个a标签的内容</a>";
console.log(str1.replace(/<a>(.*)<\/a>/g, "替换成新的结构"));
console.log(str2.replace(/<a>(.*?)<\/a>/g, "替换成新的结构"));

分析：*? 就是惰性模式的标识，可以理解为 找到一个符合的就收手就不再贪婪
      因为这里又加了g，所以是找到全部符合这种情况的都给替换掉