基本语法
exec()函数用于检索字符串中的正则表达式的匹配
如果字符串中有匹配的值,则返回该匹配值,否则返回null
RegExpobject.exec (string)
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = 'hello'
var pattern = /o/
var result = pattern.exec(str)
console.log(result)
</script>
</body>
</html>
这个时候我们就可以得到以下结果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-epKMCLkR-1659971129432)(https://secure2.wostatic.cn/static/oYzzs2tX3N1m2Dm3AdWRT7/image.png)]
我们可以看到我们在上面的正则表达式中成功的匹配到了字母o
,它所在的索引是4
当我们在正则表达式中匹配一个不存在的值它会返回null
,让我们尝试一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = 'hello'
var pattern = /x/
var result = pattern.exec(str)
console.log(result)
</script>
</body>
</html>
运行结果如下:
分组
正则表达式中()包起来的内容表示一个分组,可以通过分组来提取自己想要的内容,示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var result = pattern.exec(str)
console.log(result)
</script>
</body>
</html>
运行结果如下:
3.字符串的replace函数
replace()函数用于在字符串中用一些字符替换另一些字符,语法格式如下:
var result = '123456'.replace ('123', 'abc')//得到的result 的值为字符串'abc456'
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str)
</script>
</body>
</html>
运行结果如下:
4. 多次replace
var str = '<div>{ {name}}今年{{ age }}岁了</div>'
var pattern = /{ {ls* ( [a-zA-z]+)1s*} }/
var patternResult = pattern.exec (str)
str = str.replace(patternResult[0],patternResult[1])
console.log(str)//输出<div>name今年{{ age }}岁了</div>
patternResult = pattern.exec (str)
str = str.replace(patternResult[0],patternResult[1])
console.log (str)//输出<div>name今年age岁了</div>
patternResult = pattern.exec (str)
console.log (patternResult)//输出null
5.使用while循环replace
上面的案例执行的次数还是不够多,如果我们要执行20次就要写20次replace,在下面的案例中我们可以把replace与循环相结合:
var str = '<div> { {name}}今年{ { age }}岁了</div>'
var pattern = / { {\S* ( [a-zA-z]+)\S*}}/
var patternResult = null
while(patternResult = pattern.exec (str)) {
str = str.replace (patternResult[0],patternResult[1])
}
console.log(str) //输出<div>name今年age岁了</div>
6.replace替换为真值
var data = { name: '张三·,age: 20 }
var str 述'<div> { {name}}今年{{ age }}岁了</div>'
var pattern = /{ { \s* ( [a-zA-z]+)\s*} }/
var patternResult = null
while ( (patternResult = pattern.exec (str))){
str = str.replace (patternResult[0],data[patternResult[1]])
}
console.log (str)