JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div id="output"></div>

CSS

html body {
  padding-top:60px;
  background: #FFF;
  color: #334f61;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
}

h4 {
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 14px;
  color: #F00;
}
a {
    color: #334f61;
    font-weight: bold;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}

#output {
    max-width: 600px;
    margin: auto;
    padding: 0 10px;
}

JavaScript

// Array of URLs to scrape
var urls = [
  'https://cors-proxy.fringe.zone/' + 'https://meetingpoint-brandenburg.de/'
  // Add more URLs as needed
];

for (var i = 0; i < urls.length; i++) {
  // Make an HTTP GET request to the current URL
  $.ajax({
    url: urls[i],
    method: 'GET',
    success: function (response) {
      // Extract data using jQuery selectors
      var titles = $(response).find('.mp_middle_content .timeline-heading').map(function () {
        return $(this).html();
      }).get();
      var paragraphs = $(response).find('.mp_middle_content .timeline-body').map(function () {
        return $(this).html();
      }).get();

      // Create the output with line breaks
      var output = '';
      for (var j = 0; j < paragraphs.length; j++) {
        // Check if the current title or paragraph contains the class "small"
        if (!$(response).find('.mp_middle_content .timeline-heading').eq(j).hasClass('small') &&
            !$(response).find('.mp_middle_content .timeline-body').eq(j).hasClass('small')) {
          output += titles[j] + '<br>' + paragraphs[j] + '<br>';
        }
      }

      // Display the scraped data with line breaks
      $("body #output").append(output);
      $("#output *").removeAttr('style');
      //$("#output a[data-fancybox]").remove();
      
      // Append the additional URL to the src attributes of img elements
      $("body #output").find('img').each(function() {
        var currentSrc = $(this).attr('src');
        var newSrc = 'https://meetingpoint-brandenburg.de';
        $(this).attr('src', newSrc + currentSrc);
      });
      $("body #output").find('a[data-fancybox]').each(function() {
        var currentHref = $(this).attr('href');
        var newHref = 'https://meetingpoint-brandenburg.de';
        $(this).attr('href', newHref + currentHref).attr('target', '_blank');
      });
    },
    error: function (xhr, status, error) {
      alert('Request failed for URL', urls[i], error);
    }
  });
}