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>