在我們編程中，關於正則的使用其實不在少數，尤其是在具有驗證信息的程序中。其實，正則不僅僅可以用於可以用於信息的驗證，也可以運用於圖片名稱的驗證：以下的程序頁面就是一個很好的實例。溫馨提示：趕緊把以下的代碼複製成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>