正则表达式与字符串操作

基本语法

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)

猜你喜欢

转载自blog.csdn.net/qq_46133833/article/details/126238164
今日推荐