JS正则表达式整理

1、初识正则表达式

相似于对象、数组，正则表达式也有表达式写法和构造函数写法两种

var re = /a/    // 须要注意的是，这里'//'之间必须得有内容，不然会当作注释    var re = new RegExp('a')复制代码

以上两种写法是等价的。

2、test

test方法用来判断字符串中是否能匹配到正则设定的内容，若是能匹配则返回true，不然返回false

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

var str = 'ytuhayij68'    var re = /a/    console.log(re.test(str)) // true复制代码

3、search

search方法用来查找字符串中是否含有正则规定的内容，若是有则返回索引，不然返回-1

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

var str = 'ytuhayij68'    var re = /a/    console.log(str.search(re)) // 4复制代码

4、match

match方法用来查找字符串中匹配正则规定的内容，若是能匹配则返回数组，数组中包含匹配到的项，不然返回null

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

var str = 'ytuhayij6a8'    
    var re = /a/    
    console.log(str.match(re)) // ["a", index: 4, input: "ytuhayij68", groups: undefined]复制代码

这里能够看到，咱们最终的结果只返回了一个匹配的结果，正则默认第一次匹配成功则结束。若是咱们想要在字符串中查找全部符合条件的项，那么须要在正则的后面加上g，表明全局匹配

var str = 'ytuhayiaj68'    var re = /a/g    console.log(str.match(re)) //  ["a", "a"]复制代码

5、replace

replace方法用来查找字符串中匹配的内容，而后替换，返回新的字符串

语法：字符串.replace(正则,新字符串)或者字符串.replace(正则，回调函数)

var str = 'ytuhayiaj68'    var re = /a/g    console.log(str.replace(re, '*')) // ytuh*yi*j68复制代码

当使用回调函数时，回调函数中能够接受参数，第一个参数表明匹配到的值

var str = 'ytuhayiaj68'    var re = /ha/g    str.replace(re, function (str) {      console.log(str) // ha    })复制代码

这里有一个知识点须要注意，回调函数中从第二个参数开始接收的是正则的子项。

例如：var re = /(h)(a)(y)/g

这里把(h)(a)(y)称做母项，h为第一个子项，a为第二个子项，y为第三个子项，依次类推。

通常第一个子项用$1表示，以后类推。

var str = 'ytuhayiaj68'    var re = /(h)(a)(y)/g    str.replace(re, function ($0, $1) {      console.log($0) // hay      console.log($1) // h    })复制代码

6、转义字符

正则中经常使用到的转义字符

\s：空格

\S：非空格

\d：数字

\D：非数字

\w：字符（字母、数字、下划线）

\W：非字符

\b：单词边界

\B：非单词边界

\1：重复第一个子项

\2：重复第二个子项

. ：表明任意字符（这个比较特殊）

7、量词

咱们使用正则匹配时，可能须要如下场景，某个字符能够匹配，也能够不匹配，某个项须要匹配必定的次数，那么这时就须要用到量词了，正则中的经常使用量词以下：

{4,7}：大于等于4次小于等于7次

{4,}：大于等于4次

{4}：等于4次

?：0次或1次   === {0,1}

+:  大于等于1次 === {1,}

*：大于等于0次 === {0,}

8、位置匹配

^：脱字符，匹配开头，在多行匹配中匹配行开头

$：美圆符号，匹配结尾，在多行匹配中匹配行结尾

\b：是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置

\B：是\b的反面的意思，非单词边界。例如在字符串中全部位置中，扣掉\b，剩下的都是\B的。

(?=p)：其中p是一个子模式，即p前面的位置

(?!p)：就是(?=p)的反面意思

1.把字符串的开头和结尾用'#'替换

var result = "hello".replace(/^|$/g,'#')console.log(result) // #hello#复制代码

var result = 'I\nlove\nyou'.replace(/^|$/gm, '#')console.log(result) /** * #I# * #love# * #you# */复制代码

多行匹配时，两者是行的概念。

2.在字符l的前面添加'#'

var result = 'hello'.replace(/(?=l)/g,'#') console.log(result) // he#l#lo复制代码

3.在除了l前面的位置添加'#'

var result = 'hello'.replace(/(?!l)/g,'#') console.log(result) // #h#ell#o#复制代码

4.数字的千位分隔符表示法

var result = '2345567886756434'.replace(/(?!^)(?=(\d{3})+$)/g,',')console.log(result) // 2,345,567,886,756,434复制代码

9、一些正则的小例 子

1.去掉某个字符串的收尾空格

var str = ' ytuhayiaj68 '    var re = /\b\s+|\s+\b/g    var newStr = str.replace(re, '')    console.log('(' + newStr + ')') // (ytuhayiaj68)复制代码

这里用到了\b，表示这个字符串的边界。

或

var str = ' ytuhayiaj68 '    var re = /(^\s+)|(\s+$)/g    var newStr = str.replace(re, '')    console.log('(' + newStr + ')') // (ytuhayiaj68)复制代码

注意：第二种写法中有用到^和$这两个字符，其中^写在正则的前面表示字符串起始位置，$写在正则的后面表示字符串的结束位置。

2.找到页面中对应的class为box1的项，将之背景变动为红色

<ul>    <li class="box1"></li>    <li></li>    <li class="box1box2"></li>    <li></li>    <li class="box1 box2"></li>  </ul>  <script>    var liList = document.getElementsByTagName('li')    function changeBg(listNode, classItem) {      var re = new RegExp('\\b' + classItem + '\\b')      for (var i = 0; i < listNode.length; i++) {        if (re.test(listNode[i].className)) {          listNode[i].style.background = 'red'        }      }    }    changeBg(liList, 'box1')  </script>复制代码

这里须要注意两点，一个是若是正则中须要用变量的话，那么必须用构造函数的方式来构造正则传参。一个是添加\b时须要在前面加\，这样才能将\b传入正则中

3.关键字屏蔽，将字符串中的“导游”和“游客”都替换成“**”

var str = '责成涉事导游员赵某某向游客赔礼道歉，对涉事导游员赵某某做出吊销导游证的行政处罚'    var re = /导游|游客/g    var newStr = str.replace(re, function ($0, $1) {      var result = ''      for (var i = 0; i < $0.length; i++) {        result += '*'      }      return result    })    console.log(newStr) // 责成涉事**员赵某某向**赔礼道歉，对涉事**员赵某某做出吊销**证的行政处罚复制代码

4.去掉字符串中包含的标签，如<div><h3>等等

var str = '去掉<h3>字</h3>符串<div class="hello">中包</div>含的标签'    var re = /<[^>]+>/g    console.log(str.replace(re, '')) // 去掉字符串中包含的标签复制代码

这里在中括号内部使用了^，[^>]这个总体表明着非>的字符

5.将一个字符串转化为驼峰方式，如："get-element-by-id"

var str = 'get-element-by-id'var re = /-\w/gvar newStr = str.replace(re, function ($0) {   return $0.slice(1).toUpperCase()})console.log(newStr) // getElementById复制代码

6.匹配xxyy模式

var str = 'xxyy'var re = /(\w)\1(\w)\2/console.log(re.test(str)) // true复制代码