JavaScript正则表达式入门

　　工做中，正则表达式用的可能不是不少，通常使用的时候网上都有现成的实例，不多缺少比较全面的理解。本文主要以匹配HTML标签为例，简述下正则表达式经常使用的功能点。匹配HTML片断以下：

let str = `
    <div id="app">
      <div>21</div> 
      <h1>
        <span>hello</span>
        <span>smile</span>
      </h1>
    <button>按钮</button></div>
`;

　　正则匹配本文查看结果主要用String.match(RegExp)方法，经常使用的正则匹配方法为：RegExp.test(String),RegExp.exec(String)

　　一、正则表达式的声明

　　　　正则表达式的声明方式和普通变量的声明方式相似，通常状况下有两种，字面量和正则构造方法RegExp。以匹配span标签为例，匹配单个span标签的正则以下：

// 字面量方式
let normalPattern = /span/
// 调用正则构造方法
let pattern = new RegExp('span')

　　2. 修饰符

　　　　上述的正则，在匹配测试文本是，输出的结果是一个数组，只有一个元素span,若是我想匹配多个呢，这里就要引入正则修饰符的概念了，经常使用的就是 i 和 g。

　　　　　　i的含义是忽略大小写，好比用/span/只能去匹配span字符串，SPAN匹配不了，若是想匹配SPAN,就要加上i修饰符

　　　　　　g的含义是global，全局查找，正则默认只匹配第一个符合条件的值，若是要全局匹配，就要加上g修饰符。

　　　　具体写法以下：

// 字面量方式
let normalPattern = /span/ig
// 调用正则构造方法
let pattern = new RegExp('span', 'ig')

　　3.字符类别

　　　　以上匹配的文本都很是的基础，假如我想匹配全部的HTML标签，该怎么写呢？HTML标签不少，无法一个个所有罗列出来，咱们可使用字符类别，进行快速的匹配。参考列表以下：

 　　字符类别，在某种程度上来讲，能够理解为一个字符集，如上述列表所示，\d是数字0-9的集合，若是咱们要匹配一段文本中全部的数字，能够直接声明以下正则：

let numberPattern = /\d/g

　　假如我要匹配全部的HTML标签呢？在匹配一个文本以前，咱们须要先分析下HTML标签规律，首先，HTML标签和通常的XML标签，都是以尖括号<大头，以尖括号>结尾，其次，中间只能是英文字母或者数字，最后，数字或字母可能出现一次或者屡次。写正则的第一要素是先概括总结，总结出规律才能去分析正则的写法。正则表达式本质上也是一种规律的解释文本。从咱们总结的规律中，咱们能够按照以下写法：

let matchTags = /<\w+>/g

　　匹配结果以下：

[ '<div>', '<h1>', '<span>', '<span>', '<button>' ]

　　\w表明数字或者字母，+表明匹配一次或者屡次，g表明全局匹配。咱们在匹配文本的时候，一种规律有时候不可能只用一次，正则表达式提供了丰富的数量词语法，可以知足咱们绝大多数要求，下面的章节会有介绍。

　　咱们看到，咱们匹配的HTML标签只是前面的标签，并无后面的闭合标签，咱们如何匹配闭合标签呢？闭合标签比普通的标签多了一个斜杠/，若是咱们单纯的写/，是不能够的，你们可能意识到，正则表达式的字面量写法是两个斜杠/包起来的，若是咱们直接写，会有冲突，这时候，咱们须要借助转义字符反斜杠\进行转义便可，一些与正则表达式冲突的，都须要用转义字符进行转义，好比特殊字符(),[]，还有是一些具备特殊意义的集合，\w,\d....

　　匹配闭合标签的正则以下：

let matchCloseTags = /<\/\w+>/g

　　匹配结果：

[ '</div>', '</span>', '</span>', '</h1>', '</button>', '</div>' ]

　　4.数量词

　　　　在字符类中，咱们用到了数量词+，表明匹配一次或屡次。正则表达式数量词远远不止这些，具体列表以下所示：　　

 　　举个例子，假如我要匹配HTML片断中的h标签，咱们都知道h标签的基本规则为只有一个字母和数字，从上述咱们能够得出，咱们能够用数量词{n}，正则表达式以下：

let matchH = /<h{1}\d{1}>/g

　　匹配结果：

[ '<h1>' ]

　　在这里，咱们要记住两个个数量词，x*?和x+?，这个是最小匹配原则。假如如今咱们要匹配第一个span闭合标签和文本，即<span>hello</span>，若是咱们按照正常思路去写，以<span>开头，</span>结尾，中间是任意字符，正则表达式实现以下所示：

let matchSpan = /<span>(\S|\s)+<\/span>/g

　　匹配结果可能和咱们预想的不大同样，实际上匹配结果只有一个，以下所示：

[ '<span>hello</span>\n        <span>smile</span>' ]

　　正则默认的会全文匹配，并不会按照最小匹配原则，即找到符合条件的文本就返回，他会最大程度的去匹配符合条件的文本。若是咱们要分别匹配两段span标签，咱们就须要用到最小匹配原则的数量词，具体以下：

let matchSpan = /<span>(\S|\s)*?<\/span>/g
let matchSpan2 = /<span>(\S|\s)+?<\/span>/g

　　文本匹配结果：

[ '<span>hello</span>', '<span>smile</span>' ]

　　5.集合

　　　　正则表达式中，集合使用也比较多，语法比较简单，全部须要匹配的文本依次放在中括号[]中，好比若是你想匹配abc三个字母，pattern=/[abc]/,若是不想匹配abc,那就是pattern=[^abc]，若是匹配数字，那就是/[0-9]/,-表明一个连续的集合，字母就是[a-zA-Z]

　　6.边界

　　　　边界最简单的用法，^表明匹配输入的开始，$表明匹配输入的结束。

　　7.分组

　　　　假如如今有这样一个需求，须要匹配span标签里的文本，而不须要span标签， 此时可能会用到分组，从字面意思上来讲，分组就是把规则分类。分组的语法比较简单，就是小括号()。转换为正则的语法以下：

let matchSpanText = /(<span>)(\S+)+?(<\/span>)/
let result = str.match(matchSpanText)

　匹配结果以下图所示：

　　

 　　从上图能够看出，匹配结果数组result长度为4，第一部为匹配的结果，第二部分为(span)匹配的结果，第三部分为(\S+)匹配的结果，第四部分为(</span>)匹配的结果，若是咱们要拿纯文本，直接去arr[2]便可。咱们也能得出一个结论，所谓分组，其实就是普通的正则匹配加上分组条件的匹配集合。

　　8.断言

　　　　断言是个好东西，可以解决许多比较棘手的问题，好比上面的例子，我想拿两个标签中间的文本，采用分组去取，是能够实现，可是就看每次都要拿匹配结果的第三个数组，有点不爽，怎么办呢，断言能够帮你解决这个烦恼，匹配的结果直接是文本。断言的基本规则以下：

　　

 　　从基本规则中，咱们能够从字面上得出，断言能够设置一个文本先后的匹配规则，咱们能够将匹配标签中间的文本规则改造以下：

let matchSpanTextDescribe = /(?<=<span>)(\S+)+?(?=<\/span>)/g
let result = str.match(matchSpanTextDescribe)

　　匹配结果以下：

　　参考资料：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp#boundaries