With Below Script you can easily get image URLs from a web page Using JavaScript code.
Same script can also be write using Jquery.
Using Map Function:
Using Each Function:
Upload Below Images:
<!DOCTYPE html>
<html>
<head>
<script language="Javascript">
function myFunction() {
var x = document.images;
console.log(x);
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + x[i].src + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</head>
<body>
<div id="layout">
<div id="product-details">
<ul id="thumbnails">
<li><img src="img1.gif" alt="first caption" /></a></li>
<li><img src="img2.gif" alt="second caption" /></a></li>
</ul>
</div>
</div>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>
Same script can also be write using Jquery.
Using Map Function:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script language="Javascript">
function myFunction() {
var x = $("#thumbnails img").map(function() {
return $(this).attr("src");
}).get();
//console.log(x);
//alert(x);
var txt = "";
//var base_url = window.location.origin;
var getUrl = window.location;
//var base_url = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
var path = getUrl.pathname.split('/');
path.shift();
path.pop();
var pathname = path.join("/");
var base_url = getUrl.protocol + "///" + pathname;
var i;
for (i=0; i<x.length; i++) {
txt = txt + base_url + "/" + x[i] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</head>
<body>
<div id="layout">
<div id="product-details">
<ul id="thumbnails">
<li><img src="img1.gif" alt="first caption" /></a></li>
<li><img src="img2.gif" alt="second caption" /></a></li>
</ul>
</div>
</div>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>
Using Each Function:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script language="Javascript">
function myFunction() {
var x = Array();
$('#thumbnails img').each(function() {
x.push($(this).attr('src'));
});
console.log(x);
var txt = "";
//var base_url = window.location.origin;
var getUrl = window.location;
//var base_url = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
var path = getUrl.pathname.split('/');
path.shift();
path.pop();
var pathname = path.join("/");
var base_url = getUrl.protocol + "///" + pathname;
var i;
for (i=0; i<x.length; i++) {
txt = txt + base_url + "/" + x[i] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</head>
<body>
<div id="layout">
<div id="product-details">
<ul id="thumbnails">
<li><img src="img1.gif" alt="first caption" /></a></li>
<li><img src="img2.gif" alt="second caption" /></a></li>
</ul>
</div>
</div>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>
Upload Below Images:
0 Comments