Extract the image URL from the href attribute using Xpath

Question

Extract the image URL from the href attribute using Xpath

My goal is to extract all images enclosed in href attributes from the given code snippet

<div class="jcarousel product-imagethumb-alt" data-jcarousel="true">
<ul>
<li>
<a href="https://domain/imagefull.jpg" onclick="return false;" class="cboxElement">
<img itemprop="image" src="http://domain/imagethumb.jpg"></a>
</li>
</ul>
</div>

I attempted to retrieve them using XPath expressions like div/ul/li//a[img]/@href and

div/ul/li//a[@class="cboxElement"]/@href

as well as div/ul/li//a/@href, but none of them captured any images within the href attribute.

If anyone could provide me with the most effective XPath expression to fetch the images nested inside href, I would greatly appreciate it.

Thank you.

javascript html css xpath

Answer 1

Answer №1

I'm still trying to wrap my head around the issue, but I have managed to extract the image src using the code below. The xpath needed is simply: //a/img

var images = document.evaluate("//a/img", 
    document, null, XPathResult.ANY_TYPE, null); 
var img = images.iterateNext(); 
while (img) {
  console.log(img.src);
  img = images.iterateNext();
}

You can also check it out on jsfiddle

Answer 2

I'm still trying to wrap my head around the issue, but I have managed to extract the image src using the code below. The xpath needed is simply: //a/img

var images = document.evaluate("//a/img", 
    document, null, XPathResult.ANY_TYPE, null); 
var img = images.iterateNext(); 
while (img) {
  console.log(img.src);
  img = images.iterateNext();
}

You can also check it out on jsfiddle

Extract the image URL from the href attribute using Xpath

Answer №1

Similar questions

The Interactive Menu Toggler: A jQuery Solution

PHP is not receiving AJAX POST requests through the $_POST method

Modify a property within an object and then emit the entire object as an Observable

What is the best way to create a case-insensitive search feature in Node.js?

Material-ui 4.11.4 - Grid: For items to be displayed correctly in a column, it is necessary to set the container direction to 'row' (??)

VueJS does not update values instantly as they change

The issue with Extjs store.proxy.extraParams being undefined appears to only occur in Internet Explorer

Transforming an object containing methods into a string using Javascript specifically for Photoshop

Troubleshooting Issues with Form Inputs in JS/Angular Using Places API and document.getElementById Method

The submission form is being triggered immediately upon the page loading

Ways to retrieve the CSS class names associated with an element

Guide on utilizing Vue to trigger an API call when the input box loses focus

Is it possible to pass a parameter to an NGXS action that is not the Payload?

Harnessing the power of two-way data binding in VueJS

Utilizing React JS to neatly display Firebase data in a table

I'm having trouble executing the JavaScript function

What is the best way to make the first <p> tags bold within an array?

Is it normal for Node's console to not display all object properties?

In Javascript, merge two arrays together in a specific format

Removing elements in AngularJS using ngRepeat