第10天-JavaScript正则表达式

正则有什么用

• 给定的字符串是否符合正则表达式的过滤逻辑
• 通过正则表达式，从字符串中获取我们想要的特定部分
• 替换字符串满足正则表达式的字符

例如：验证邮箱、手机号、银行卡、采集器（爬虫）、中奖信息133*161屏蔽特殊词汇

test方法

test方法表示用正则去匹配字符串，如果匹配成功返回true,否则返回false

var reg = /aa/
console.log(reg.test('aa')) //true
console.log(reg.test('AA'))  //false, 如果要忽略大小写，规则可以这样写  reg =/aa/i

//判断是一个字符串是否全是数字
var str = "111addsdsds111"
// \D,只要不是数字的字符都会被\D匹配上
var reg2 = /\D/
if(reg.test(str)){
    alert('不全是数字')
}else{
    alert('全是数字')
}

search方法

search方法表示正则去匹配字符串，如果匹配成功就返回匹配成功等位置，如果匹配失败就返回-1

var str = 'abcde'
//需求：查询a是否在字符串str中
console.log(str.search('a')) 

//需求:查找a+数字（大于等于1）是否存在字符串中
var reg = /a\d+/
var str2 = 'ascda2132ve'
console.log(str2.search(reg))

match方法

match方法表示正则去匹配字符串，如果匹配成功就返回匹配成功的数组，如果匹配不成功就返回null

//match 匹配上就返回内容，匹配不上就返回null
var str = "222ddd33aa11cc"
//g 表示全局匹配， i表示忽略大小写
var reg = /\d/g
var res = str.match(reg)
console.log(res)

replace方法

replace表示正则去匹配字符串，匹配成功的字符串会被新的字符串替换

var str = "床前明月光"

//注意：字符串不能被改变，只有返回一个新的字符串
var str2 = str.replace('明月', '太阳')
console.log(str, str2)

//把数字替换成xxx
var str3 = "32dewfdew23w1"
var reg = /\d/g    //如果不加g，只会替换第一个匹配到的数字
var res = str3.replace(reg, 'xxx')
console.log(res)

//需求： 匹配上数字，每个数字加1，得到的结果是234567
var str4 = '123456'
var reg = /\d/g
//replace 第二个参数可以是一个函数, 函数执行后会有一个结果，拿这个结果去替换
var str5 = str4.replace(reg, function(s){
    return Number(s) + 1
})

console.log(str5)

//敏感词过滤
//思路：把敏感词找出来 替换成**
var oText1 = document.getElementById('text1')
var oText2 = document.getElementById('text2')
var oBtn = document.getElementById('btn1')
oBtn.onclick = function(){
    //金胖胖主持曹县政治局会议 研究2020年经济工作
    var valueStr = oText1.value
    //在正则中|表示或者的意思
    var reg = /金胖胖|曹县|政治局/g
    var str = valueStr.replace(reg, function(s){
        var result = ''
        for(var i=0; i<s.length; i++){
            result += '*'
        }
        return result
    })
    oText2.value = str
}

replace应用-敏感词过滤

匹配子项

1)使用()可以进行分组操作

var str="2019-12-05"
//小括号 用来分组
var reg = /(\d+)-(\d+)-(\d+)/
var ret = str.match(reg)
console.log(ret[0])  //2019-12-05
console.log(ret[1])  //
console.log(ret[2])  //
console.log(ret[3])  //

注意： match方法，如果传入的正则使用全局匹配，那么返回的值是一个整体正则表达式匹配的结果，不会返回子项匹配的结果

var str="2019-12-05"
//小括号 用来分组
var reg = /(\d+)-(\d+)-(\d+)/g   //g表示全局
var ret = str.match(reg)
console.log(ret[0])  //2019-12-05
console.log(ret[1])  //undefined
console.log(ret[2])  //undefined
console.log(ret[3])  //undefined

2) replace子项

一个()表示一个子项

第一个参数输出的内容是 正则整体匹配的结果

从第二个参数起，有多少子项，都可以打出来，参数和子项一一对应

子项打完以后再打的第一个参数就是匹配的位置

var str="2019-12-05"

var reg = /(\d+)-/g
str.replace(reg, function(s0, s1, s2){
    console.log(s0,s1,s2)
})

子项（子模式）有什么用？

　　1、当正则比较复杂的时候，可以用()进行分组，比如匹配邮箱

　　2、当需要使用到整体中部分内容的时候，可以用()分组，并且得到分组中的内容

中括号的作用

1)中括号表示一个整体，并且括号中的字符属于或者关系，只挑选一个出来匹配

var reg = /ab[cde]de/

var str = "abcde"
console.log(reg.test(str)) //true

var str2 = "abdde"
console.log(reg.test(str2)) //true

var str3 = "abede"
console.log(reg.test(str3)) //true

var str4 = "abpde"
console.log(reg.test(str4)) //false

2) 中括号可以给范围

var reg = /[0-9][a-zA-Z]/

var str = "5c"
console.log(reg.test(str)) //true

var str2 = "1A"
console.log(reg.test(str2)) //true

var str3 = "D1"
console.log(reg.test(str3)) //false

var str4 = "QQ"
console.log(reg.test(str4)) //false

3) 在[]中排除一些东西

//除了a-z以外的都能匹配上
var reg = /[^a-z]/

var str = "%"
console.log(reg.test(str)) //true

var str2 = "d"
console.log(reg.test(str2)) //false

<textarea id="ipt"></textarea>
<button id="btn">提交</button>

<script>
    //需求：把用户输入的标签替换掉，只留下标签里面的内容
    var oIpt = document.getElementById('ipt')
    var oBtn = document.getElementById('btn')
    oBtn.onclick = function(){
        var valueStr = oIpt.value
        //<div id='heboan'>hello world</div>

        // \用来转义，因为/在正则中有特殊意义
        // "/"有些时候有，有些时候没有，*表示前一个字符出现0次或多次
        // + 表示前一个字符出现一次或多次
        var reg = /<\/*[a-zA-Z]+[^>]*>/g
        oIpt.value = valueStr.replace(reg, '')
    }
</script>

案例：替换标签

转义字符

"."表示任意字符,想匹配真正的.则需要转义，使用"'\."

var str = 'abc'
var reg = /a.c/
console.log(reg.test(str))  //true

\b表示匹配单词边界，它匹配的是一个位置，这个位置的一边是单词（可以包括字母、数字、下划线），零一边是非字母、数字、下划线或者开始位置以及结束位置，这样的条件才满足, \B和\b相反，当\b匹配不上的时候，\B可以匹配上

var str = 'today'
var reg = /to\b/
console.log(reg.test(str)) //to后面跟着day,所以不满足条件，返回false

//如果str = 'to day'
var str = 'to day'
console.log(reg.test(str))  //true

"\s"空格

var str = "   heboan"
var reg = /\s/
console.log(reg.test(str)) //true

"\S"非空格

var str = "   "
var reg = /\S/
console.log(reg.test(str)) //false

"\d"数字

var str = "12121"
var reg = /\d/
console.log(reg.test(str)) //true

"\D"非数字

var str = "12121"
var reg = /\D/
console.log(reg.test(str)) //false

"\w"字符（字母 数字 下划线）

var str = "_23Wa8"
var reg = /\w+/
console.log(reg.test(str)) //true

"\W"非字符

var str = "%"
var reg = /\W/
console.log(reg.test(str)) //true

"\1"重复的子项

var str = "abca"
var reg = /(a)(b)(c)\1/
console.log(reg.test(str)) //true

var str = "abca"
var reg = /(a)(b)(c)\2/
console.log(reg.test(str)) //false

var str = "abcc"
var reg = /(a)(b)(c)\3/
console.log(reg.test(str)) //true

量词

{4,8}  最少出现4次，最多出现8次

{4,} 最少出现4次

{4} 正好出现4次

"+" 表示至少出现1次

"？" 出现0从或1次

"*" 至少出现0次{0,}

正则中默认：区分大小写，如果不区分大小写的话，在正则的最后加标识i

正则默认： 正则匹配成功就会结束，不会继续匹配，如果要全局匹配的话，在正则最后加标识g

| 表示或

其他修饰符

^ 开头

$ 结束