在我们编程中，关于正则的使用其实不在少数，尤其是在具有验证信息的程序中。其实，正则不仅仅可以用于可以用于信息的验证，也可以运用于图片名称的验证：以下的程序页面就是一个很好的实例。温馨提示：赶紧把以下的代码复制成txt文本，然后把后缀txt 去掉，改成html 为后缀，然后放在一个文件夹里，再分别放一种1.jpg xyz.png abc.webp 这三个名称的图片进去下试一下吧。神奇就这样产生了，嘻嘻。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<img src="1.jpg" id="img1">
</div>
<div >
<img src="xyz.png" id="img2">
<img src="abc.webp" id="img3">
</div>
<div id="show">
</div>
</body>
<script>
var show = document.getElementById('show');
var name1 = document.getElementById('img1');
var name2 = document.getElementById('img2');
var name3 = document.getElementById('img3');
var path1 = name1.src;
var path2 = name2.src;
var path3 = name3.src;
var filename1 = path1.substring(path1.lastIndexOf("/") + 1, path1.length);
var filename2 = path2.substring(path2.lastIndexOf("/") + 1, path2.length);
var filename3 = path3.substring(path3.lastIndexOf("/") + 1, path3.length);
window.onload = function () {
var reg = /^[a-zA-Z0-9]{1,9}\.(jpg|png|webp)$/;
if(reg.test(filename1)) {
show.innerHTML += filename1+'<br>';
}else {
console.log('img1不正确')
}
if(reg.test(filename2)) {
show.innerHTML += filename2+'<br>';
}else {
console.log('img2不正确')
}
if(reg.test(filename3)) {
show.innerHTML += filename3+'<br>';
}else {
console.log('img3不正确')
}
}
</script>
</html>