JavaScript 正则表达式

正则表达式本身就是一种语言，这在其它语言是通用的。

正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。

创建正则对象

要使用正则表达式，必须要在程序创建正则对象 。我们需要得到一个RegExp类的实例。

① 直接量语法创建（隐式创建）

正则表达式直接量定义为包含在一对斜杠（/）之间的字符。

var reg = /匹配模式/匹配标志;

② 构造函数创建

通过 RegExp() 构造函数可以实现动态创建正则表达式。RegExp() 的第二个参数是可选的。

var reg = new RegExp( " 匹配模式 " , ' 匹配标志 ' );

 

正则表达式字符

直接量字符

正则表达式中所有字母和数字都是按照字面含义进行匹配的，其他非字母的字符需要通过反斜杠（\）作为前缀进行转移，如 \n 匹配换行符。这些字符为直接量字符（literal characters）。这些字符都是精确匹配，每一个字符都只能匹配一个字符。

在正则表达式中，有一些标点符号具有特殊含义，他们是：^ $ . * + ? = ! : | \ / ( ) [ ] { } 如果需要在正则表达式中与这些直接量进行匹配，必须使用前缀 \ 。

 

字符类

如果不想匹配某一个特定的字符而是想匹配某一类字符，则需要使用字符类。

通过将直接量字符放入方括号内，可以组成字符类（character class）。一个字符类可以匹配它所包含任意 一个 字符。如 [abc] 可以匹配 a，b，c 中任意一个字符。

使用 ^ 作为方括号中第一个字符来定义否定字符集，它匹配所有不包含在方框括号内的字符。[^] 可以匹配任意字符。

字符类可以使用连字符来表示字符范围。比如匹配小写字母[a-z]，匹配任何字母和数字可以用[a-zA-Z0-9]。

 

转义字符

一些常用的字符类，在 JavaScript 中有特殊的转义字符来表达它们。

字符	匹配
[...]	方括号内任意字符，方括号用于查找某个范围内的字符
[^...]	不在方括号内任意字符，方括号用于查找某个范围内的字符
.	除了换行符和其他 Unicode 行终止符之外的任意字符
\w	等价于 [a-zA-Z0-9_]
\W	等价于 [^a-zA-Z0-9_]
\s	任何 Unicode 空白符
\S	任何非 Unicode 空白符的字符
\d	等价于 [0-9]
\D	等价于 [^0-9]
\b	匹配单词边界。通常用于查找位于单词的开头或结尾的匹配。
\B	匹配非单词边界。匹配位置的上一个和下一个字符的类型是相同的：即必须同时是单词，或必须同时是非单词字符。字符串的开头和结尾处被视为非单词字符。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。

例如：

[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
var str = "Runoob Runoob";  var patt1 = /\bRun/g; document.write(str.replace(patt1,"AAA"));	结果为：AAAoob AAAoob
var str = "Rnoob Runoob";  var patt1 = /\Bnoob/; document.write(str.replace(patt1,"AAA"));	结果为：RAAA Runoob

量词

字符	含义
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。 例如：/a{1,3}/  匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。 例如：/a{2,} 匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X}	匹配包含 X 个 n 的序列的字符串。 例如：/a{2}/  匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
n?	匹配任何包含零个或一个 n 的字符串。 例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
n+	匹配任何包含至少一个 n 的字符串。 例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
n*	匹配任何包含零个或多个 n 的字符串。 例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
n$	匹配任何结尾为 n 的字符串。 例如，var str="Is this his"; var patt1=/is$/g;
^n	匹配任何开头为 n 的字符串。 例如，var str="Is this his"; var patt1=/^Is/g;
?=n	匹配任何其后紧接指定字符串 n 的字符串。 例如，对其后紧跟 "all" 的 "is" 进行全局搜索：var str="Is this all there is";var patt1=/is(?= all)/g;
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。var str="Is this all there is";var patt1=/is(?! all)/gi;

 

贪婪和非贪婪的重复

上面所有的重复都是“贪婪的”匹配，也就是匹配尽可能多的字符。如 /a+/ 匹配 'aaaa' 时，它会匹配 'aaaa' 。

如果想要尽可能少的匹配，只需要在重复的标记后加一个问号（?）即可。如 /a+?/ 匹配 'aaaa' 时，它会匹配 'a' 。

 

选择、分组和引用

选择
字符 | 用于分隔供选择的模式，匹配时会尝试从左到右匹配每一个分组，直到发现匹配项。如 /ab|bc|cd/ 可以匹配字符串'ab'、'bc' 和 'cd'。

// 一个分组中，可以有多个候选表达式，用|分隔：
var reg = /I love (him|her|it)/;
reg.test('I love him')  // true
reg.test('I love her')  // true

捕获型分组
圆括号可以把单独的项组合成子表达式，以便可以像一个独立的单元用 |、*、+ 或者 ? 对单元内的项进行处理。

// 这里reg中的(/d{2})就表示一个分组，匹配两位数字。
var reg = /(\d{2})/

// 引用：被正则表达式匹配（捕获）到的字符串会被暂存起来。其中，由分组捕获的串会从1开始编
// 号，于是我们可以引用这些串，$1引用了第一个被捕获的串，$2是第二个，依次类推。分组可以通过$0-$9引
// 用，其中的$0只的是匹配的整个结果。比如我们想将日期12.21/2012改为2012-12-21：
var reg = /(\d{2}).(\d{2})\/(\d{4})/
var date = '12.21/2012'
date = date.replace(reg, '$3-$1-$2') // date = 2012-12-21

// 反向引用
// 正则表达式里也能进行引用，这称为反向引用：
var reg = /(\w{3}) is \1/
reg.test('kid is kid') // true
reg.test('kid is dik') // false
// \1引用了第一个被分组所捕获的串，换言之，表达式是动态决定的。

 非捕获型分组

有时候，我们只是想分个组，而没有捕获的需求，则可以使用非捕获型分组，语法为左括号后紧跟" ?: "

// 正向前瞻型分组：
var reg = /kid is a (?=doubi)/
reg.test('kid is a doubi') // true  // kid is a 后面跟着什么？如果是doubi才能匹配成功。
reg.test('kid is a shabi') // false

// 负向前瞻型分组：
var reg = /kid is a (?!doubi)/
reg.test('kid is a doubi') // false
reg.test('kid is a shabi') // true  // 负向前瞻则刚好相反，不是doubi才能匹配成功。

 

指定匹配位置（锚元素）

有一些正则表达式的元素不用来匹配实际的字符，而是匹配指定的位置。我们称这些元素为正则表达式的锚。

正则表达式中的锚字符包括：

• ^ 用来匹配字符串的开始，多行检索时匹配一行的开头。
• $ 用来匹配字符串的结束，多行检索时匹配一行的结尾。
• \b 用来匹配单词的边界，就是 \w 和 \W 之间的位置，或者 \w 和字符串的开头或结尾之间的位置。
• \B 匹配非单词边界的位置。
• 例： /\bJava\b/ 可以匹配 Java 却不匹配 JavaScript。

任意正则表达式都可以作为锚点条件。

先行断言
(?=pattern) 它表示一个位置，该位置之后的字符能匹配 pattern 。如 /\d+(?=%)/ 匹配字符串 '100%' 中的 '100' 但是不匹配 '100。'

负向先行断言
(?!pattern) 它表示一个位置，该位置之后的字符不能匹配 pattern 。

后行断言
(?<=pattern) 它表示一个位置，该位置之前的字符能匹配 pattern 。例，/(?<=\$)\d+/ 匹配 '$100' 但是不匹配 '￥100'。

负向后行断言
(?<!pattern) 它表示一个位置，该位置之前的字符能不匹配 pattern。

 

修饰符

在正则表达式的第二条斜线之后，可以指定一个或多个修饰符，/pattern/g。

常用修饰符：

• i 执行不区分大小写的匹配。
• g 全局匹配。
• m 多行匹配模式。
• y “粘连”（sticky）修饰符。y修饰符的作用与g修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的涵义。
• s 表示点（.）可以表示任意字符，不设置的话，四个字节的 UTF-16 字符和行终止符不能用 . 表示。
• u 开启 “Unicode 模式”，用来正确处理大于 \uFFFF 的 Unicode 字符。也就是说，会正确处理四个字节的 UTF-16 编码。

通过 RegExp.prototype.flags 可以获得正则修饰符的字符串。/pattern/ig.flags 返回 "gi"。

 

JavaScript search() 方法

定义和用法

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

如果没有找到任何匹配的子串，则返回 -1。

语法

string.search(searchvalue)

参数值

参数	描述
searchvalue	必须。查找的字符串或者正则表达式。

返回值

类型	描述
Number	与指定查找的字符串或者正则表达式相匹配的 String 对象起始位置。

例如 

var str="Visit Runoob!"; 
var n=str.search("Runoob"); //6

 

JavaScript replace() 方法

定义和用法

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法

string.replace(searchvalue,newvalue)

参数值

参数	描述
searchvalue	必须。规定子字符串或要替换的模式的 RegExp 对象。 请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
newvalue	必需。一个字符串值。规定了替换文本或生成替换文本的函数。

返回值

类型	描述
String	一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

 例如 

var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob"); //Visit Runoob!Visit Microsoft!

 

JavaScript match() 方法

定义和用法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

 语法

string.match(regexp)

参数值

参数	描述
regexp	必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。

返回值

类型	描述
Array	存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。 如果没找到匹配结果返回 null 。

例如

var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g); //ain,ain,ain

 

JavaScript split() 方法

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

提示： 如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注意： split() 方法不改变原始字符串。

语法

string.split(separator,limit)

参数值

参数	描述
separator	可选。字符串或正则表达式，从该参数指定的地方分割 string Object。
limit	可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值

类型	描述
Array	一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

例如

var str="How are you doing today?";
var n=str.split(" "); //How,are,you,doing,today?
var str="张三;李四,王五|赵六";
var n=str.split(/[;\|,]/,4); // ["张三", "李四", "王五", "赵六"]

 

RegExp正则

RegExp 对象属性

属性	描述
constructor	返回一个函数，该函数是一个创建 RegExp 对象的原型。
global	判断是否设置了 "g" 修饰符
ignoreCase	判断是否设置了 "i" 修饰符
lastIndex	用于规定下次匹配的起始位置
multiline	判断是否设置了 "m" 修饰符
source	返回正则表达式的匹配模式

RegExp 对象方法

方法	描述
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。
toString	返回正则表达式的字符串。

 

常用正则表达式

// 整数最多2位，小数最多3位
/^\d{1,2}(\.\d{1,3})?$/

// 包含两位小数的百分比
/^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/

// 最多输入8位，如果还输入小数则最多保留后两位，并且大于0
/(^[0-9]{1,8}$)|(^[0-9]{1,10}[\.][0-9]{1,2}$)/

// 最多输入10位，如果还输入小数则最多保留后两位，并且大于0，允许输入正负号
/(^(\-|\+)?[0-9]{1,12}$)|(^[0-9]{1,10}[\.]{1}[0-9]{1,2}$)/

// 固定电话
/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/

利用正则表达式实现输入限制

<a-input @change="e =>validateFields_code(e, 5)" />
// 限制仅允许输入数字及小数点后两位,不限制位数
validateFields_money (e) {
    var value = e.target.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
    e.target.value = value
    return value
  }
// 限制仅允许输入数字及小数点后两位,只限制整数位数
validateFields_money_matchlength (e, len) {
    var value = e.target.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
    if (value.indexOf('.') != -1) {
      var strs = value.split('.')
      var numStr = strs[0]
      if (numStr.length > len) {
        numStr = numStr.substring(0, len)
      }
      value = numStr + '.' + strs[1]
    } else if (value.length > len) {
      value = value.substring(0, len)
    }
    e.target.value = value
    return value
  }

// 只允许输入整数
<a-input @change="validateFields_money" />
validateFields_num (e) {
    var value = e.target.value.replace(/^\D*(\d*(?:)?).*$/g, '$1')
    e.target.value = value
    return value
  }

// 只允许输入字母和数字，并限制字数
<a-input @change="e =>validateFields_code(e, 5)" />
validateFields_code (e, length) {
    var value = e.target.value.replace(/[^a-zA-Z0-9]/gi, '')
    if (value.length > length) {
      value = value.substring(0, length)
    }
    e.target.value = value
    return value
  },

// 只允许输入字母数字汉字和指定的特殊字符
<a-input @change="validateFields_money" />
validateFields_input_str (e) {
    var value = e.target.value.replace(/[^a-zA-Z\d\u4e00-\u9fa5，。!？()]/g, '')
    e.target.value = value
    return value
  }