JavaScript正则表达式基础详解

JavaScript正则表达式基础详解

正则表达式基础
正则表达式是一种微型语言
正则对于字符串的验证，替换，修改，切换数组等功能
写法：
var reg=/ 正则内容 /修饰符
var reg=new RegExp(“正则内容”,“修饰符”)
修饰符是针对正则的一种功能增强
g 全局匹配
i 不区分大小写
m 执行多行匹配

正则表达式表示方法：
var reg=/a/gi;//查找全局字符串中不分大小写所有的Aa
var str=“defAbgac”;

var reg=/a/g;//查找是否含有a
console.log(reg.test(“asdjhas”))
判断字符串中是否满足正则表达式，返回布尔值
console.log(reg.exec(“ajksdsakjd”));
将字符串中满足正则表达式的内容转换为一个数组，包括有这个字符，整个字符串，群组和下标
reg.exec(“fgrhjdm”)//索引下标如果加g会找到最后一个的下标，没有g则是第一个的下标

判断是否含有某个字符串
if(str.indexOf(“a”)>-1){ }
if(str.includes(“a”)){}
if(/a/i.test(str)){}

字符串使用正则方法
search 找到满足正则元素起始字符的下标，返回字符串中第一个匹配项的索引,没有匹配项返回-1

match 将字符串中满足正则内容的元素放入在数组中

var str="3[ab]4[cd]";
var arr=str.match(/\[[a-z]+\]/g);
console.log(arr);

replace 替换

var str="<a>asdasd</a><div>wqedfdfs</div>";
str=str.replace(/\<\/?[a-z]+\>/g,function(item){
                 return item.toUpperCase();
            });
console.log(str);

split字符分割为字符串数组

var str="a,b,c";
var arr=str.split(",");
console.log(arr);

var  str="ab+cd|ef-g";
var arr=str.split(/[+|-]/g);
console.log(arr);

元字符
像/cat/这种的就是就是元字符

console.log(“catcot”.match(/cat/));//能查到cat
//在字符串中查找对应的字符,/cat/是元字符
console.log(“catcot”.match(/c.t/g));//能查到cat和cot
//通配符.代表任意个字符
console.log(“catc.tcot”.match(/c.t/g));//查找c.t，将通配符.转义为字符串.
console.log(“c\\t”.match(/c\\\\t/g));
console.log(“catcrtcot”.match(/c[oa]t/g));//查找cot和cat不要crt,[]中的字符代表任意一个[]内的字符
console.log(“catcrtc.tcot”.match(/c[oa.]t/g));//查找cot和cat和c.t不要crt，中括号中的.不需要转义，就是字符串，不再拥有通配符概念
console.log(“catcbtcctcdtcet”.match(/c[a-d]t/g));//从a-d
console.log(“12314catcrtc.tcot41345435”.match(/[0-9]/g));匹配数字
console.log(“123146783743741345435”.match(/[0-79]/g));//不要8，表示0-7和一个9
console.log("\.".match(/./g));//代表一个斜杠一个.
console.log(“acbdass”.match(/[acbdass]/g));//在[]中重复无用，与[acbds]一样
console.log(“3[ab]5[cd]”.match(/[[a-d][a-d]]/g));

反义字符串^
使用时要注意范围的精准
console.log(“catcbtcctcdtcetcft”.match(/c[^e]t/g));//表示中括号内取反，表示这里的内容不要
console.log(“emfijooddvvadsbjheihoscievyoeivto”.match(/[b-df-hj-np-tv-z]/g));//不要aeiou
console.log(“abcmsofnapeebea”.match(/c[a^{e]t/g));//如果上箭头}不在中括号第一位，则表示字符^
//[^{^]等同于[}^]表示不要上箭头

// [a-zA-Z0-9] \w 字符a-zA-Z0-9
// [^a-zA-Z0-9] \W 非a-zA-Z0-9字符
// [0-9] \d 数字
// [^0-9] \D 非数字
// \s 空白字符
// \S 非空白字符

console.log("   ab    cd".match(/\s/g).join(""));//字符串除去空格

input输入框输入内容禁止输入空格
var input=document.querySelector(“input”);
input.addEventListener(“input”,inputHandler);
方法1

function inputHandler(e){
            var arr=input.value.match(/\S/g);
            input.value=arr ? arr.join("") : "";
        }

方法2

function inputHandler(e){
            input.value=input.value.replace(/\s/g,"");
        }

重复

console.log(“aaabbbcc”.match(/a{3}b{3}c{2}/g));
日期型2020-10-20
console.log(/\d{4}(-\d{2}){2}/);

a{0}===.{0}===f{0}
任意字符{0}，都表示匹配空字符串

重复次数的范围
贪婪，非贪婪
console.Log(“aaaaaaa”.match(/a{3,6}/g));//最少重复3次，最多重复6次，aaa aaaa aaaaa aaaaaa满足
console.Log(“a222222222222b”.match(/a2{1,}b/g));//表示可以有许多2
console.log(“2[abc]3[cdefg]4[ab]”.match(/[[a*-z]{1,}]/g))

{0,}可以用*来代替表示有没有，{1,}用+代替，表示至少有1个，{0,1}用?代替表示有没有

将[]换为<> 将小写字母换为大写字母
var str=“2[abc]3[cdefg]4[ab]5[]”
str=str.replace(/[[a-z]{0,}]/g,function(item,index,str){
// return “<”+item.slice(1,-1)+">";
return item.toUpperCase();
});
console.log(str);

案例：
添加删除元素的class名

<div class="div1  div2      div3     div4"></div>

function addClass(elem,className){
              return className.match(/\S+/g).reduce(function(value,item){
                    if(value.indexOf(item)<0) value.push(item);
                    return value;
              },elem.className.match(/\S+/g)).join(" ");
            }

function removeClass(elem,className){
                return  className.match(/\S+/g).reduce(function(value,item){
                    var index=value.indexOf(item);
                    if(index>-1) value.splice(index,1);
                    return value;
              },elem.className.match(/\S+/g)).join(" ");
            }

var div=document.querySelector("div");
div.className=removeClass(div,"div3   div5        div7    div1  ");