dreamweaver regex查找并替换以添加webp图像

Question

我想在一个大的静态站点中找到所有的jpg，并添加webp

所以我需要找到

<img src="image/path/my be/long/new_2.jpg" alt="descriptive tag blah"  />

并替换为

<picture>
<source srcset="image/path/amy be/long/new_2.webp" type="image/webp"> 
<img src="image/path/my be/long/new_2.jpg" alt="descriptive tag blah"  />
</picture>

我试过各种各样的，但我真的不熟悉regex，所以我得到的最接近的是

<img src="([^"]+)" alt="(.*?)"  />

并替换为

<picture>
<source srcset="$1.webp" type="image/webp"> 
<img src="$1" alt="$2"  />
</picture>

但它的文件扩展名是.jpg.webp

regex是一个巨大的主题，任何有经验的人对此的任何帮助都将非常受欢迎

Answer 1

要调整正则表达式以匹配不带.jpg的源，可以使用以下正则表达式：

它匹配：

• a-z：小写字符
• 0-9：数字
• \/：斜线
• \s： 空白
• _：下划线

并使用.jpg"停止

<img src="([a-z0-9/s_]+).jpg" alt="(.*?)"  />