Tuesday, January 5, 2016

Extract only the values from a select element on a web page hosted in internet

Do you need to extract only the values from a html select element which is on a web site hosted in the internet.

  • Then just copy and paste following html code and save it with any_name.html and open it with a web browser
  • Go to the site and get the relevant html code set for the select box.(You can extract it using a tool like web developer tools available in the browser)
  • Copy and paste above code set on the text area of our generated web page.  
  • Then click process button on the page
  • It will filter out only the required values.


<html>
    <head>
        <script language="javascript">
            function getModels(){
                var selectContent = document.getElementById("selectContent").value;
                var indexToStart = selectContent.indexOf(">") + 1;
                var targetString = selectContent.substring(indexToStart);
                var optionSet = targetString.split("</option>");
                var optionArrLength = optionSet.length;
                var modelSet = [];

                for(var counter = 0 ; counter < optionArrLength; counter++){   
                    modelSet[counter] = (optionSet[counter].split(">"))[1];
                }
               
                var resultLength = modelSet.length;
                var currentDivContent = "";
                for(var counter = 0; counter < resultLength; counter ++){
                    currentDivContent = currentDivContent + modelSet[counter] + "<br>";
                   
                }
                document.getElementById("resultText").innerHTML = currentDivContent;   
                console.log(currentDivContent);
            }
        </script>
    </head>

    <body>
       
        <form>
            <textarea id = "selectContent" rows=20 cols=100></textarea>
            <input type="button" value="Process" OnClick="getModels()">
        </form>
       
        <div>
            <p id = "resultText"></p>
        </div>
    </body>
</html>





No comments:

Post a Comment