JS Scraping Code Sample
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scraper</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
//Note: No error handling is implemented. This is designed as a bare-bones code example to get the job done.
var proxy = "";
function getData() {
document.getElementById("resultsText").value = "";
document.getElementById("resultsHTML").innerHTML = "";
document.getElementById("resultsJSON").innerHTML = "";
$.get(proxy + document.getElementById("targetURL").value, function (data, status) {
//Raw text response
document.getElementById("resultsText").value = data;
//Raw HTML response
document.getElementById("resultsHTML").innerHTML = data;
var doc = new DOMParser().parseFromString(data, "text/html"); //create an object we can iterate through
var items = doc.getElementsByTagName("img"); //Get all image references from the source code
document.getElementById("resultsHTML").innerHTML = ""; //Reset the results area
for (i = 0; i < items.length; i++) {
document.getElementById("resultsHTML").innerHTML += "<img src='" + items[i].src + "'>"; //Render the URL of each image
}
//Process JSON
$.each(data, function (n, item) {
console.log(item);
});
//Reddit Example
$.each(data, function (n, item) {
$.each(item.data.children, function (n, item) {
console.log(item.data.author);
document.getElementById("resultsJSON").innerHTML += item.data.author + "<br>";
});
});
});
}
</script>
</head>
<body>
<div class="jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card text-black p-3">
<div class="input-group mb-3">
<input type="text" class="form-control" id="targetURL" placeholder="Target URL to scrape...">
<div class="input-group-append">
<button class="btn btn-success" type="submit" onclick="getData()">Scrape</button>
</div>
</div>
<textarea rows="10" id="resultsText"></textarea><br /><br />
<div id="resultsHTML"></div><br /><br />
<div id="resultsJSON"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>