前言
关于正则表达式，是前端学习的重点和难点。我在之前的一片文章重新拎一遍js的正则表达式中，重新带领大家温故了一下正则表达式。本文主要带领大家一起应用一些正则表达式，简单介绍一些正则表达式中常用的方法及对象，例如：test、exec、match、replace、search等等。
正则表达式对象的方法
1、test,返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。如果存在则返回 true，否则就返回 false。
2、exec,用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。
3、compile,把正则表达式编译为内部格式，从而执行得更快。
正则表达式对象的属性
1、source,返回正则表达式模式的文本的复本。只读。
2、lastIndex,返回字符位置，它是被查找字符串中下一次成功匹配的开始位置。
3、input ($_),返回执行规范表述查找的字符串。只读。
4、lastMatch ($&),返回任何正则表达式搜索过程中的最后匹配的字符。只读。
5、lastParen ($+),如果有的话，返回任何正则表达式查找过程中最后括的子匹配。只读。
6、leftContext ($`),返回被查找的字符串中从字符串开始位置到最后匹配之前的位置之间的字符。只读。
7、rightContext ($'),返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符。只读。
String对象一些和正则表达式相关的方法
1、match,找到一个或多个正则表达式的匹配。
2、replace,替换与正则表达式匹配的子串。
3、search,检索与正则表达式相匹配的值。
4、split,把字符串分割为字符串数组。
案例1 test方法测试
//test方法,测试字符串,符合模式时返回true,否则返回false
var re = /he/;//最简单的正则表达式,将匹配he这个单词
var str = "he";
console.log(re.test(str));//true
str = "we";
console.log(re.test(str));//false
str = "HE";
console.log(re.test(str));//false,大写,如果要大小写都匹配可以指定i标志(i是ignoreCase或case-insensitive的表示)
re = /he/i;
console.log(re.test(str));//true
str = "Certainly!He loves her!";
console.log(re.test(str));//true,只要包含he(HE)就符合,如果要只是he或HE,不能有其它字符,则可使用^和$
re = /^he/i;//脱字符(^)代表字符开始位置
console.log(re.test(str));//false,因为he不在str最开始
str = "He is a good boy!";
console.log(re.test(str));//true,He是字符开始位置,还需要使用$
re = /^he$/i;//$表示字符结束位置
console.log(re.test(str));//false
str = "He";
console.log(re.test(str));//true
//当然,这样不能发现正则表达式有多强大,因为我们完全可以在上面的例子中使用==或indexOf
re = /\s/;// \s匹配任何空白字符，包括空格、制表符、换页符等等
str= "user Name";//用户名包含空格
console.log(re.test(str));//true
str = "user Name";//用户名包含制表符
console.log(re.test(str));//true
re=/^[a-z]/i;//[]匹配指定范围内的任意字符,这里将匹配英文字母,不区分大小写
str="variableName";//变量名必须以字母开头
console.log(re.test(str));//true
str="123abc";
console.log(re.test(str));//false 案例2 exec测试
var haoVersion = "Haorooms 8";//其中的8表示系统主版本号
var re = /^[a-z]+\s+\d+$/i; //+号表示字符至少要出现1次,\s表示空白字符,\d表示一个数字
console.log(re.test(haoVersion));//true,但我们想知道主版本号
//另一个方法exec,返回一个数组,数组的第一个元素为完整的匹配内容
re=/^[a-z]+\s+\d+$/i;
arr = re.exec(haoVersion);
console.log(arr[0]);//将haoVersion完整输出,因为整个字符串刚好匹配re
//我只需要取出数字
re=/\d+/;
var arr = re.exec(haoVersion);
console.log(arr[0]);//8
//exec返回的数组第1到n元素中包含的是匹配中出现的任意一个子匹配
re=/^[a-z]+\s+(\d+)$/i;//用()来创建子匹配
arr =re.exec(haoVersion);
console.log(arr[0]);//整个haoVersion,也就是正则表达式的完整匹配
console.log(arr[1]);//8,第一个子匹配,事实也可以这样取出主版本号
console.log(arr.length);//2
haoVersion = "Haorooms 8.10";//取出主版本号和次版本号
re = /^[a-z]+\s+(\d+)\.(\d+)$/i;//.是正则表达式元字符之一,若要用它的字面意义须转义
arr = re.exec(haoVersion);
console.log(arr[0]);//完整的haoVersion
console.log(arr[1]);//8
console.log(arr[2]);//10案例3 String对象的一些和正则表达式有关的方法
1、关于replace，我之前的一片博客专门写了。还可以传参数。具体请看：http://www.haorooms.com/post/js_replace_bl
2、其他操作
//replace方法,用于替换字符串
var str ="some money";
console.log(str.replace("some","much"));//much money
//replace的第一个参数可以为正则表达式
var re = /\s/;//空白字符
console.log(str.replace(re,"%"));//some%money
//在不知道字符串中有多少空白字符时,正则表达式极为方便
str ="some some \tsome\t\f";
re = /\s+/;
console.log(str.replace(re,"#"));//但这样只会将第一次出现的一堆空白字符替换掉
//因为一个正则表达式只能进行一次匹配,\s+匹配了第一个空格后就退出了
re = /\s+/g;//g,全局标志,将使正则表达式匹配整个字符串
console.log(str.replace(re,"@"));//some@some@some@
//另一个与之相似的是split
var str = "a-bd-c";
var arr = str.split("-");//返回["a","bd","c"]
//如果str是用户输入的,他可能输入a-bd-c也可能输入a bd c或a_bd_c,但不会是abdc(这样就说他输错了)
str = "a_db-c";//用户以他喜欢的方式加分隔符s
re=/[^a-z]/i;//前面我们说^表示字符开始,但在[]里它表示一个负字符集
//匹配任何不在指定范围内的任意字符,这里将匹配除字母处的所有字符
arr = str.split(re);//仍返回["a","bd","c"];
//在字符串中查找时我们常用indexOf,与之对应用于正则查找的方法是search
str = "My age is 18.Golden age!";//年龄不是一定的,我们用indexOf不能查找它的位置
re = /\d+/;
console.log(str.search(re));//返回查找到的字符串开始下标10
//注意,因为查找本身就是出现第一次就立即返回,所以无需在search时使用g标志
//下面的代码虽然不出错,但g标志是多余的
re=/\d+/g;
console.log(str.search(re));//仍然是10
var str = "My name is CJ.Hello everyone!";
var re = /[A-Z]/;//匹配所有大写字母
var arr = str.match(re);//返回数组
console.log(arr);//数组中只会包含一个M,因为我们没有使用全局匹配
re = /[A-Z]/g;
arr = str.match(re);
console.log(arr);//M,C,J,H
//从字符串中抽取单词
re = /\b[a-z]*\b/gi;//\b表示单词边界
str = "one two three four";
console.log(str.match(re));//one,two,three,four 案例4 RegExp对象实例的一些属性
var re = /[a-z]/i;
console.log(re.source);//将[a-z]字符串输出
//请注意,直接console.log(re)会将正则表达式连同前向斜线与标志输出,这是re.toString方法定义的
var re = /[A-Z]/;
//exec方法执行后,修改了re的lastIndex属性,
var str = "Hello,World!!!";
var arr = re.exec(str);
console.log(re.lastIndex);//0,因为没有设置全局标志
re = /[A-Z]/g;
arr = re.exec(str);
console.log(re.lastIndex);//1
arr = re.exec(str);
console.log(re.lastIndex);//7
var re = /[A-Z]/;
var str = "Hello,World!!!";
re.lastIndex = 120;
var arr = re.exec(str);
console.log(re.lastIndex);//0 案例5 RegExp对象的静态属性
//input 最后用于匹配的字符串（传递给test,exec方法的字符串）
var re = /[A-Z]/;
var str = "Hello,World!!!";
var arr = re.exec(str);
console.log(RegExp.input);//Hello,World!!!
re.exec("tempstr");
console.log(RegExp.input);//仍然是Hello,World!!!,因为tempstr不匹配
//lastMatch 最后匹配的字符
re = /[a-z]/g;
str = "hi";
re.test(str);
console.log(RegExp.lastMatch);//h
re.test(str);
console.log(RegExp["$&"]);//i ,$&是lastMatch的短名字，但由于它不是合法变量名，所以要。。
//lastParen 最后匹配的分组
re = /[a-z](\d+)/gi;
str = "Class1 Class2 Class3";
re.test(str);
console.log(RegExp.lastParen);//1
re.test(str);
console.log(RegExp["$+"]);//2
//leftContext 返回被查找的字符串中从字符串开始位置到最后匹配之前的位置之间的字符
//rigthContext 返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符
re = /[A-Z]/g;
str = "123ABC456";
re.test(str);
console.log(RegExp.leftContext);//123
console.log(RegExp.rightContext);//BC456
re.test(str);
console.log(RegExp["$`"]);//123A
console.log(RegExp["$'"]);//C456 案例6 使用RegExp构造函数注意点
var str = "\?";
console.log(str);//只会输出?
var re = /\?/;//将匹配?
console.log(re.test(str));//true
re = new RegExp("\?");//出错,因为字符串里面\是转义字符\?相当于？要得到\?，就要\\?
re = new RegExp("\\?");//正确，将匹配？
console.log(re.test(str));//true 在正则表达式中使用特殊字符
//ASCII方式用十六进制数来表示特殊字符
var re = /^\x43\x4A$/;//将匹配CJ
console.log(re.test("CJ"));//true
//也可使用八进制方式
re = /^\103\112$/;//将匹配CJ
console.log(re.test("CJ"));//true
//还可以使用Unicode编码
re =/^\u0043\u004A$/;//使用 Unicode，必须使用u开头，接着是字符编码的四位16进制表现形式
console.log(re.test("CJ")); 案例7 常见的正则表达式应用
下面列举几种常见正则表达式应用场景，共大家使用和参考：
驼峰字符串
const camelCase = (string) => {
const camelCaseRegex = /[-_\s]+(.)?/g
return string.replace(camelCaseRegex, (match, char) => {
return char ? char.toUpperCase() : ''
})
}
console.log(camelCase('foo Bar')) // fooBar
console.log(camelCase('foo-bar--')) // fooBar
console.log(camelCase('foo_bar__')) // fooBar首字母大写
const capitalize = (string) => {
const capitalizeRegex = /(?:^|\s+)\w/g
return string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())
}
console.log(capitalize('hello world')) // Hello World
console.log(capitalize('hello WORLD')) // Hello WorldHTML 转义
const escape = (string) => {
const escapeMaps = {
'&': 'amp',
'<': 'lt',
'>': 'gt',
'"': 'quot',
"'": '#39'
}
// The effect here is the same as that of /[&<> "']/g
const escapeRegexp = new RegExp(`[${Object.keys(escapeMaps).join('')}]`, 'g')
return string.replace(escapeRegexp, (match) => `&${escapeMaps[match]};`)
}
console.log(escape(`
<div>
<p>hello world</p>
</div>
`))
/*
<div>
<p>hello world</p>
</div>
*/HTML 反转义
const unescape = (string) => {
const unescapeMaps = {
'amp': '&',
'lt': '<',
'gt': '>',
'quot': '"',
'#39': "'"
}
const unescapeRegexp = /&([^;]+);/g
return string.replace(unescapeRegexp, (match, unescapeKey) => {
return unescapeMaps[ unescapeKey ] || match
})
}
console.log(unescape(`
<div>
<p>hello world</p>
</div>
`))
/*
<div>
<p>hello world</p>
</div>
*/校验 24 小时制
const check24TimeRegexp = /^(?:(?:0?|1)\d|2[0-3]):(?:0?|[1-5])\d$/
console.log(check24TimeRegexp.test('01:14')) // true
console.log(check24TimeRegexp.test('23:59')) // true
console.log(check24TimeRegexp.test('23:60')) // false
console.log(check24TimeRegexp.test('1:14')) // true
console.log(check24TimeRegexp.test('1:1')) // true校验日期格式
const checkDateRegexp = /^\d{4}([-\.\/])(?:0[1-9]|1[0-2])\1(?:0[1-9]|[12]\d|3[01])$/
console.log(checkDateRegexp.test('2021-08-22')) // true
console.log(checkDateRegexp.test('2021/08/22')) // true
console.log(checkDateRegexp.test('2021.08.22')) // true
console.log(checkDateRegexp.test('2021.08/22')) // false
console.log(checkDateRegexp.test('2021/08-22')) // false匹配颜色值
const matchColorRegex = /#(?:[\da-fA-F]{6}|[\da-fA-F]{3})/g
const colorString = '#12f3a1 #ffBabd #FFF #123 #586'
console.log(colorString.match(matchColorRegex))
// [ '#12f3a1', '#ffBabd', '#FFF', '#123', '#586' ]校验版本号
// x.y.z
const versionRegexp = /^(?:\d+\.){2}\d+$/
console.log(versionRegexp.test('1.1.1'))
console.log(versionRegexp.test('1.000.1'))
console.log(versionRegexp.test('1.000.1.1'))获取网页 img 地址
const matchImgs = (sHtml) => {
const imgUrlRegex = /<img[^>]+src="((?:https?:)?\/\/[^"]+)"[^>]*?>/gi
let matchImgUrls = []
sHtml.replace(imgUrlRegex, (match, $1) => {
$1 && matchImgUrls.push($1)
})
return matchImgUrls
}
console.log(matchImgs(document.body.innerHTML))格式化电话号码
let mobile = '18379836654'
let mobileReg = /(?=(\d{4})+$)/g
console.log(mobile.replace(mobileReg, '-')) // 183-7983-6654