正则表达式图像文件夹源答案

【问题标题】：reg ex image folder source正则表达式图像文件夹源
【发布时间】：2016-06-07 16:09:26
【问题描述】：

我正在尝试创建一个正则表达式来检测 HTML、CSS 或 JavaScript 中的任何图像引用，同时考虑到图像源引用可以采用的各种模式。

这是在 gulp-replace 任务中修改所有图片的 url 路径。

这些是我认为我需要介绍的实例

"../img/hero/layer4.png
"../images/bg-top.jpg
'img/logo.jpg
'img/btn/banner-submit.jpg
"img/btn/animated-thank-you-banner.gif

这就是我目前所拥有的正则表达式

(?:(\.\.\/)|)(img|imgs|image|images)(.*[\\\/])

https://regex101.com/r/kF7hG0/2

不幸的是，这似乎与 img 标签匹配

<img src="img/

如何修改 reg ex 以捕获 " 或 ' 之后的所有内容，本质上是没有文件名和扩展名的图像路径？

正则表达式作为 gulp 任务的一部分运行

gulp.task('html', function () {

  gulp.src(source + '**/*.+(html|php)')
    .pipe($.plumber())
    .pipe($.inline({
        base: source,
        js: $.uglify,
        css: $.cleanCss,
        disabledTypes: ['svg', 'img']
    }))
    .pipe($.replace(/("|')(?:(\.\.\/))?(?:img|image|images)(.*[\\\/])/g, '"' + mtkosrc + campaign +'-'))
    .pipe(gulp.dest(build))
});

谢谢

【问题讨论】：

为什么不使用解析器？

标签： javascript regex gulp gulp-replace

【解决方案1】：

(?:(\.\.\/)|)(?!img src)(img|imgs|image|images)(.*[\\\/])

我在您原来的正则表达式中添加了(?!img src)。这是一个否定的先行断言，即接下来要捕获的文本不是img src。

有关环视断言的更多信息：http://www.regular-expressions.info/lookaround.html

（这是您现有正则表达式的快速补丁，因为我相信我们可以重写它以使其更快、更直观。）

【讨论】：