正则表达式 & 字符串处理

正则表达式基础(1)

• 复习字符串操作

• search  查找   -> 首次出现位置，返回索引值 && 不存在返回 -1

• substring  获取子字符串  -> 按索引取，取头不取尾，返回字符串 

• charAt  获取某个字符  -> 按索引取返回字符(串)  && 索引不存在的返回空字符串

• split  分割字符串，获得数组 -> 按分隔符截取，返回字符串内容的数组 

• 

正则表达式基础(2)

• 什么是正则表达式

• 什么叫“正则”

• 规则、模式

• 强大的字符串匹配工具

• 是一种正常人类很难读懂的文字

• RegExp对象

• JS风格——new RegExp(“a”, “i”)

• perl风格——/a/i

字符串与正则配合(1)

• search

• 字符串搜索

• 返回出现的位置
•   var str = 'abcdef'  alert(str.search('b')); === alert(str.search(/b/));  -> 1
• 忽略大小写：i——ignore
•  var str = 'aBcdef'  alert(str.search(/b/i));  -> 1
• 判断浏览器类型
• e.g. 简单校验浏览器类型

<script>
    // alert(window.navigator.userAgent)// 浏览器信息
    if(window.navigator.userAgent.search(/firefox/i) != -1) {
        alert('ff')
    }else if (window.navigator.userAgent.search(/chrome/i) != -1){
        alert('chrome')
    }else if(window.navigator.userAgent.search(/msie 9/i) != -1){
        alert('IE9')
    }
    //....
</script>

 

• match 

• 获取匹配的项目
• 量词：+
• 量词变化：\d、\d\d和\d+
• 全局匹配：g——global

例子：找出所有数字

var str = 'sdd 233 sd 333 3 sddw33 4589 0'
var re = /\d/g
 
alert(str.match(re) ->

 

        结果：  

字符串与正则配合(2)

• replace

• 替换所有匹配
• 返回替换后的字符串
• var str =  'abAcdef'   alert(str.replace(/a/gi,'T'))  ->'TbTcdef' 
• 例子：敏感词过滤 

<textarea id="area1" cols="30" rows="10"></textarea>
<button id="btn">屏蔽敏感词</button>
<textarea id="area2" cols="30" rows="10"></textarea>

 

<script>
    var oAr1 = document.getElementById('area1')
    var oAr2 = document.getElementById('area2')
    var oBtn = document.getElementById('btn')
 
    var re = /我们|你们|他们/g
    oBtn.onclick = function() {
        oAr2.value = oAr1.value.replace(re, '***')
    }
</script>

 

字符类(1)

• 任意字符
• [abc]
• 例子：o[usb]t——obt、ost、out ； 看仔细 /[a,b]/ === /a|,|b/; /[23 4]/  === /2|3| |4/
• re = /o[usb]t/;    ===    re =  /out|ost|obt/
• 范围
• [a-z]、[0-9]
• 例子：id[0-9]——id0、id5
• 排除
• [^a]
• 例子：o[^0-9]t——oat、o?t、o t
•  

字符类(2)

• 组合
• [a-z0-9A-Z]
• 实例：偷小说
• e.g.   var re =/\<[^<>]+\>/g === re = /<[^<>]+>/g

<textarea id="area1" cols="30" rows="10"></textarea>
<button id="btn">转换</button>
<textarea id="area2" cols="30" rows="10"></textarea>

 

<script>
    var oAr1 = document.getElementById('area1')
    var oAr2 = document.getElementById('area2')
    var oBtn = document.getElementById('btn')
 
    var re = /<[^<>]+>/g
    oBtn.onclick = function() {
       oAr2.value = oAr1.value.replace(re, '')
    }
</script>

 

• 过滤HTML标签
• 自定义innerText方法
• 转义字符
• .（点）——任意字符   => \. 表示 普通的 .
• \d [0-9]、
• \w [a-z0-9_]、
• \s 空白字符  如 空格 制表符等
• e.g.  去除空白字符 re= /\s+/g
• \D [^0-9]、\W  [^a-z0-9_]、\S

 

 

量词

• 什么是量词

• 出现的次数
• {n,m}，至少出现n次，最多m次
• 例子：查找QQ号

• 常用量词

• {n,}  至少n次
• {n,m } 最少n次，最多m次
• {n， }  最少n次，最多不限
• {，m}  最少不限，最多m次
• {n}       正好n次 
• e.g. 匹配正确的QQ号

<script>
    var str = '我的QQ号是643609709，你的是2332129845'
    var re = /[1-9]\d{4,10}/ //表示如qq号那样5-11位的纯数字串
 
    alert(str.match(re))
</script>

 

• *  任意次  {0,} 表示可以不出现，不建议使用，会引发一些小问题
• ？  零次或一次  {0,1} 表示可以出现或不出现，出现也只是出现一次
• +  一次或任意次， 实际是{1,}的简写

 

e.g. 邮箱正则匹配 注意：一般做校验类的， 都要加行首行尾来限定全部内容

<input id="text" type="text" placeholder="邮箱" />
<button type="submit">校验</button>

 

<script>
    // 一串字母、数字、下划线 @ 一串英文、数字 . 一串英文(长度是2-4)
    //      \w+            @   [a-z0-9]+ \.    [a-z]{2-4}
    // \w+@[a-z0-9]+\.[a-z]{2-4}
   
    var oText = document.getElementById('text')
    var oBtn = document.getElementsByTagName('button')[0]
    //var re = /\w+@[a-z0-9]+\.[a-z]{2,4}/ //存在bug 需要限定在行首行尾
    var re = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/
    oBtn.onclick = function() {
        if (re.test(oText.value)) {
            alert('邮箱正确')
        } else {
            oText.value = ''
            alert('邮箱错误，请重新输入')
        }
    }
</script>

 

 

e.g. 删除行首行尾多余空格 注意：正则加g匹配查找到的全部内容

// 行首空格          行尾空格

//    ^\s+                 \s+$

var re = /^\s+|\s+$/
alert(str.replace(re,''))

        对比结果：  

 

 

• 高级表单校验

• 校验邮箱

• 行首行尾 ^\w+@[a-z0-9]+\.[a-z]{2,4}$
• 去除空格：^\s*|\s*$   g

• 匹配中文：[\u4e00-\u9fa5]

• 

• 完美版getByClass(oParent, sClass)

单词边界：\b

        

var re = new ReqExp('\\b'+sClass +'\\b', 'i')