使用没有img标签的jsoup提取图像

Question

I need to extract images that are within the div and the src isn't listed within an img tag. I cannot do a getElementById() either since it varies from page to page. Is there some regex I can use to extract the images from doc for such cases? Any help is appreciated.

HTML snippet:

<div 
    class="rendition-bg rendition-bg--alignment desktop-center-center mobile-center-center" 
    data-src="/content/dam/Image.jpg.transform/default- 
mobile/image.jpg" 
    data-mobile-rendition="/content/dam/Image.jpg.transform/default-mobile/image.jpg" 
    data-tablet-rendition="/content/dam/Image.jpg.transform/default-mobile/image.jpg" 
    data-desktop- rendition="/content/dam/Image.jpg.transform/default-desktop/image.jpg" 
    style="background-image: url(&quot;/content/dam/Image.jpg.transform/default- 
mobile/image.jpg&quot;);">
</div>

Answer 1

Far from elegant or easy solution, but here is something that, hopefully, can give you some start:

    String snippet =
      "<div class=\"rendition-bg rendition-bg--alignment desktop-center-center" +
        "mobile-center-center \" data-src=\"/content/dam/Image.jpg.transform/default-" +
        "mobile/image.jpg\" data-mobile- \n" +
        "rendition=\"/content/dam/Image.jpg.transform/default-mobile/image.jpg\" data-" +
        "tablet-rendition=\"/content/dam/Image.jpg.transform/default-mobile/image.jpg\"" +
        "data-desktop- rendition=\"/content/dam/Image.jpg.transform/default-desktop/image.jpg\"" +
        "style=\"background-image: url(&quot;/content/dam/Image.jpg.transform/default-" +
        "mobile/image.jpg&quot;);\"></div>";

    List<String> imgAttrs =
      Jsoup.parse(snippet)
        .getElementsByTag("div")
        .stream()
        // get lists of attributes
        .map(Element::attributes)
        // flatten all attrs to single list
        .flatMap(attrs -> attrs.asList().stream())
        // filter attributes
        .filter(attribute -> attribute.getValue() != null && attribute.getValue().contains(".jpg"))
        // map to values
        .map(Attribute::getValue)
        // replace all ".transform" with a whitespace
        .map(attrValue -> attrValue.replace(".transform", " "))
        // get url value of a "background-image"
        .map(attrValue -> getUrlFromBackgroundImage(attrValue))
        // split attributes by whitespaces
        .flatMap(attrValue -> Stream.of(attrValue.split(" ")))
        .collect(toList());
      }

     private static String getUrlFromBackgroundImage(final String backgroundImage) {
        Pattern pattern = Pattern.compile("background-image:[ ]?url\\((['\"]?(.*?\\.(?:png|jpg|jpeg|gif)(\\s)?)*)");
        Matcher matcher = pattern.matcher(backgroundImage);
        return matcher.find() ? matcher.group(1) : backgroundImage;
     }

The contents of imgAttrs should be:

/content/dam/Image.jpg
/default-mobile/image.jpg
/content/dam/Image.jpg
/default-desktop/image.jpg
/content/dam/Image.jpg
/default-mobile/image.jpg
"/content/dam/Image.jpg
/default-mobile/image.jpg

Not sure if that's what you need though.

Answer 2

Explanation in comments:

    Document doc = Jsoup.parse(
        "<div class=\"rendition-bg rendition-bg--alignment desktop-center-center mobile-center-center \" "
        + "data-src=\"/content/dam/Image.jpg.transform/default-mobile/image.jpg\" "
        + "data-mobile-rendition=\"/content/dam/Image.jpg.transform/default-mobile/image.jpg\" "
        + "data-tablet-rendition=\"/content/dam/Image.jpg.transform/default-mobile/image.jpg\" "
        + "data-desktop-rendition=\"/content/dam/Image.jpg.transform/default-desktop/image.jpg\" "
        + "style=\"background-image: url(&quot;/content/dam/Image.jpg.transform/default-mobile/image.jpg&quot;);\"></div>");

    // select all elements with "data-src" attribute, but here we use only the first of them
    Map<String, String> dataAttributes = doc.select("[data-src]").first().dataset();

    // here we have all data attributes of this element:
    System.out.println(dataAttributes);

    // you can access them like this:
    System.out.println(dataAttributes.get("mobile-rendition"));
    System.out.println(dataAttributes.get("tablet-rendition"));
    System.out.println(dataAttributes.get("desktop-rendition"));

    // split and create list of urls (contains duplicates)
    List<String> urls = dataAttributes.entrySet().stream().flatMap(e -> Stream.of(e.getValue().split("\\.transform")))
                .collect(Collectors.toList());

    // if you need only unique urls use this one instead:
    //  Set<String> urls = dataAttributes.entrySet().stream().flatMap(e -> Stream.of(e.getValue().split(".transform"))).collect(Collectors.toSet());
    System.out.println(urls);

Answer 3

Observing the div closely, we can see that there are 2 images referenced. They are

data-src=                  "/content/dam/Image.jpg.transform/default-mobile/image.jpg" 
data-mobile-rendition=     "/content/dam/Image.jpg.transform/default-mobile/image.jpg" 
data-tablet-rendition=     "/content/dam/Image.jpg.transform/default-mobile/image.jpg" 
data-desktop- rendition=   "/content/dam/Image.jpg.transform/default-desktop/image.jpg" 
style="background-image: url/content/dam/Image.jpg.transform/default-mobile/image.jpg

Of these four image references 3 are referring to the same image while another one is referring to a desktop ~ image. So if we need to extract URL for these two images:

data-src=                  "/content/dam/Image.jpg.transform/default-mobile/image.jpg" 
data-desktop- rendition=   "/content/dam/Image.jpg.transform/default-desktop/image.jpg"

We can use the following code:

        Elements els = doc.select("div.rendition-bg");
        for (Element ele :els){
                System.out.println(ele.absUrl("data-src"));
                System.out.println(ele.absUrl("data-desktop-"));                
            }

Let me know if I have understood your requirement correctly.