用正则表达式从图片路径中提取数字部分

2023-08-13 10:00:02 浏览数 (2)

使用正则表达式从路径中提取了数字部分,并将结果存储在变量number中,然后通过console.log输出了结果。

逐行解释代码的含义:

代码语言:javascript复制
const path = "localhost:8080/chemApp/poi/static/img/pot/12.png";

这行代码定义了一个变量path,存储了一个路径字符串。

代码语言:javascript复制
const regex = //(d ).png$/;

这行代码定义了一个正则表达式regex,用于匹配路径中的数字部分。正则表达式//(d ).png$/的含义如下:

代码语言:javascript复制
/:正斜杠字符,需要使用转义符进行转义。

(d ):匹配一个或多个数字字符,并使用括号捕获匹配结果,存储在匹配对象中的第一个捕获组中。

.:匹配点字符.,需要使用转义符进行转义。

png:匹配字符串"png"。

$:匹配输入字符串的结尾。
代码语言:javascript复制
const match = path.match(regex);

这行代码使用match方法将路径字符串与正则表达式进行匹配,返回一个匹配结果数组。

代码语言:javascript复制
const number = match ? match[1] : null;

这行代码使用条件(三元)运算符,将匹配结果中的第一个捕获组的值存储在变量number中。如果没有匹配结果,将number设置为null。

代码语言:javascript复制
console.log(number); // 输出 "12"

最后,使用console.log输出变量number的值。

如果路径满足正则表达式的匹配条件,那么number将被赋值为"12",并通过console.log输出。

=== index.html

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head>

</head>
<body>
 

  <script>
 //    const path = "localhost:8080/chemApp/poi/static/img/pot/12.png";
 //    const fileName = path.substring(path.lastIndexOf('/')   1);
 //    console.log(fileName); // 输出 "12.png"
    
    
    const path = "localhost:8080/chemApp/poi/static/img/pot/12.png";
    const regex = //(d ).png$/;
    const match = path.match(regex);
    const number = match ? match[1] : null;
    console.log(number); // 输出 "12"
  </script>
</body>
</html>

0 人点赞