javascript - 比较 img src + a wrap url strings 看它们是否是 "similar"

Question

如果你有如下代码:

    <div class="container">

        <a href="http://testing.test/photo.jpg">
            <img src="http://testing.test/photo.jpg">
        </a>

        <a href="http://testing.test/photo.jpg">
            <img src="http://testing.test/photo-450x450.jpg">
        </a>

        <a href="http://testing.test/photo.jpg">
            <img src="http://testing.test/photo-150x150.jpg">
        </a>

        <a href="http://somethingdifferent.test">
            <img src="http://testing.test/photo.jpg">
        </a>

    </div>

我正在尝试向 A 标签添加一个类，其中包含图像。

所以我有

$(".container").find('a').has("img").each(function () {

            $(this).addClass("testingClass");
    });  

但是，现在我想添加一个额外的检查。我只想在图像 src + 包装它的 href 相同或“相似”时添加类(它们最后只有缩略图大小，即 -150x150)。

换句话说，在上面的 HTML 代码中，它会将类添加到 <a>。 1,2,3 但不是 4。

我如何在 Javascript/jQuery 中执行此操作？对于第一个 a 标签，我可以简单地比较 src 值和 href 值，如果相同 = 那么 true/添加类。但是其他的并不完全相同，结果会是假的，有没有办法做到这一点？

感谢大家的指点

Answer 1

我试图压缩它，但回想起来它可能难以阅读，所以我将尝试在下面浏览它:

$(".container").find('a').has("img").each(function(){
    var f1 = $(this).attr('href').split('/').slice(-1)[0].split('.'),
        f2 = $(this).find('img:first').attr('src').split('/').slice(-1)[0],
        re = new RegExp('^'+f1.slice(0,f1.length-1).join('.')
             +'(?:-\\d+?x\\d+?)?\\.'+f1.slice(-1)[0]+'$');
    if(re.test(f2)) $(this).addClass("testingClass");
});  

jsFiddle

基本上我抓取了 href 和 src 值的最后一部分，将 href 分成两部分(文件名称和文件扩展名)并构建一个 regular expression即时匹配确切的名称或带有后缀 -\dx\d 的文件名，其中 \d 代表任何数字。

为了更好地形象化它，Regex (重要的一点)内容如下:

/^FILE_NAME(?:-\d+?x\d+?)?\.FILE_EXT$/