| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Data Extraction Example</title>
- </head>
- <body>
- <label for="plan_data">Enter URL:</label>
- <input type="text" id="plan_data" placeholder="Enter URL">
- <button onclick="fetchAndExtractData()">Fetch and Extract Data</button>
- <textarea id="result" rows="10" cols="50" readonly></textarea>
- <script>
- function fetchAndExtractData() {
- var urlInput = document.getElementById('plan_data');
- var resultTextarea = document.getElementById('result');
- // Get the value from the input field
- var url = urlInput.value;
- // Use the server-side proxy
- var proxyUrl = 'proxy.php?url=' + encodeURIComponent(url);
- // Fetch data from the proxy URL
- fetch(proxyUrl)
- .then(response => response.text())
- .then(data => {
- // Create a temporary element to parse the HTML
- var tempElement = document.createElement('div');
- tempElement.innerHTML = data;
- // Extract data for each field
- var fields = ['pid', 'locality', 'Planning\\ Zones', 'Total\\ Area', 'title', 'municipality', 'Planning\\ Codes', 'Planning\\ Scheme'];
- var extractedData = {};
- fields.forEach(fieldName => {
- // Escape spaces in field names
- var escapedFieldName = fieldName.replace(/\s+/g, ' ');
-
- // Escape spaces in field names and convert to lowercase
- var sanitizedFieldName = fieldName.replace(/\s+/g, '_').toLowerCase().replace(/\\/g, '');
- var fieldElement = tempElement.querySelector('#' + escapedFieldName);
- // Get the text content or any other property you want
- var fieldValue = fieldElement ? fieldElement.textContent : 'Not found';
- // Store the extracted data in the object
- extractedData[sanitizedFieldName] = fieldValue;
- });
- // Display the result in the textarea
- resultTextarea.value = JSON.stringify(extractedData, null, 2);
- // Clean up the temporary element
- tempElement.remove();
- })
- .catch(error => {
- // Handle errors
- resultTextarea.value = 'Error fetching data: ' + error.message;
- });
- }
- </script>
- </body>
- </html>
|