比较 IMG SRC + A 包装 URL 字符串，看看它们是否“相似”

compare img src + a wrap url strings to see if they are "similar"

本文关键字：是否 相似 字符串 SRC IMG URL 包装 比较      更新时间：2023-09-26

如果您有以下代码：

    <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 代码中，它会将类添加到 1，2，3 <a>而不是 4。

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

谢谢大家的任何提示

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

$(".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");
});

js小提琴

基本上，我正在抓取href的最后一部分和src值，将href分成两部分（文件名和文件扩展名），并动态构建一个正则表达式以匹配确切的名称或文件名与后缀-'dx'd其中'd表示任何数字。

为了更好地可视化它，正则表达式（重要位）如下所示：

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

这样的东西可以在没有正则表达式的情况下工作：

$(".container a").has("img").each(function () {
    var hURL = $(this).attr("href");
    var iURL = $(this).children("img").attr("src");
    var imgName = iURL.slice(iURL.lastIndexOf("/")+1,iURL.lastIndexOf("."));
    var hrefPointer = hURL.slice(hURL.lastIndexOf("/")+1,hURL.lastIndexOf("."));
    if(imgName.indexOf(hrefPointer) >= 0 && hrefPointer.length > 1) {
       $(this).addClass("testingClass");
    }
});

JSFiddle

注意：这是草率的，更好的主意是有一个明确定义的"相似性"，您可以通过正则表达式搜索。定义一个模式，并匹配模式，这比巧合的字符串分析要好得多。

例如，它们是否应该仅在来自同一域时才匹配？相同的完整路径 

http://test.test.test/photo.jpg == 
http://test.test.test/thumbnails/photo-150x150.jpg

？

扩展呢？是否 

http://test.test.test/photo.jpg == 
http://test.test.test/photo-150x150.png

如果没有测试，很难定义函数。有关这方面的更多信息，请查看测试驱动开发的想法。

希望这对这个和未来的项目有所帮助。

您可以从 href 中删除扩展名并测试它是否是图像 url 的前缀（如果这满足您对"相似"的定义）：

jQuery(".container a img").each(function () {
    var href_url = jQuery(this).parent("a").attr("href");
    var img_url = jQuery(this).attr("src");
    if(img_url.indexOf(href_url.substring(0, href_url.lastIndexOf("."))) == 0) {
       jQuery(this).parent("a").addClass("testingClass");
    }
});

编辑：修复了原始代码以添加类a标签，并将startsWith替换为indexOf == 0，因为javascript中没有startsWith。jsFiddle中的工作示例。

相关文章：