JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<div id="news-list">
  <div class="ms-rtestate-read ms-rte-wpbox" unselectable="on">
    <div class="ms-rtestate-notify  ms-rtestate-read 210275ba-8c42-4e20-b19e-8fc1c239dd52" id="div_210275ba-8c42-4e20-b19e-8fc1c239dd52" unselectable="on">
      <div id="MSOZoneCell_WebPartWPQ2" class="ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth  s4-wpActive" onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)">
        <div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
          <div webpartid="8525c9ff-f900-454c-801a-59f964d1bda1" webpartid2="210275ba-8c42-4e20-b19e-8fc1c239dd52" haspers="false" id="WebPartWPQ2" width="100%" class="" allowminimize="false" allowremove="false" allowdelete="false" allowexport="false" style="">
            <table width="100%" cellspacing="0" cellpadding="0" border="0" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
            xmlns:sharepoint="Microsoft.SharePoint.WebControls" xmlns:pcm="urn:PageContentManager" xmlns:ddwrt2="urn:frontpage:internal">
              <tbody>
                <tr>
                  <td id="script">
                    <iframe src="javascript:false;" id="FilterIframe29" name="FilterIframe29" style="display:none" height="0" width="0" filterlink="?"></iframe>
                    <table summary="NGHSNews " o:webquerysourcehref="http://connect.nghs.com/_vti_bin/owssvr.dll?CS=65001&amp;XMLDATA=1&amp;RowLimit=0&amp;View={8525C9FF-F900-454C-801A-59F964D1BDA1}" width="100%" border="0" cellspacing="0" dir="none" onmouseover="
                  EnsureSelectionHandler(event,this,29)
                " cellpadding="1" id="{9DACBCCD-F9DA-4AF4-BC99-70CD79D03FC5}-{8525C9FF-F900-454C-801A-59F964D1BDA1}" class="ms-listviewtable" xmlns:o="urn:schemas-microsoft-com:office:office" handledeleteinit="true">
           ...

CSS

#news-list #script table {
      display: none;
    }
    
    #news-list .item {
      margin-bottom: 30px;
      padding-bottom: 30px;
      border-bottom: 1px solid #dedede;
    }
    
    #news-list .item .item-title {
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    #news-list .item .item-date {
      font-size: 13px;
      margin-bottom: 10px;
    }

JavaScript

$(document).ready(function() {

  var listContainer = "#news-list";

  //FUNCTION
  $(listContainer + " #script table tr td").each(function() {
    var itemText = $(this).text().trim();

    $(listContainer).append("<div class='item-value'>" + itemText + "</div>");

  });


  //GROUP EVERY 5 DIVS INTO AN ITEM
  var values = $(listContainer + " .item-value");

  for (var i = 0; i < values.length; i += 5) {
    values.slice(i, i + 5).wrapAll("<div class='item'></div>");
  }



  // Wrap the URL around the Title in each news item
  $(listContainer + " .item").each(function() {

    var itemTitle = $(this).find("div").eq(0);
    var itemDate = $(this).find("div").eq(1);
    var itemDateText = itemDate.text().split(" ");
    var itemDateText = itemDateText[0];
    var itemTeaser = $(this).find("div").eq(2);
    var itemURL = $(this).find("div").eq(3);
    var itemTarget = $(this).find("div").eq(4);

    $(itemTitle).wrapInner("<a href='" + itemURL.text() + "' target='" + itemTarget.text() + "'></a>");

    $(itemTitle).addClass("item-title");
    $(itemTeaser).addClass("item-teaser");
    $(itemDate).addClass("item-date").text("Posted on " + itemDateText);
    $(itemURL).remove();
    $(itemTarget).remove();

  });



  $(listContainer + " table").remove();






});