JSFiddle - React, Tailwind, and code Playground

by Riivr

HTML

<ul class="notesList">



</ul>

JavaScript

var notes = "12/20/2018 12:17:08 PM:Donna Harthcock:ticket test : with colon<br>12/20/2018 11:08:49 AM:Tech Tech:Testing. Notes is a Required Field.<br>12/20/2018 11:08:15 AM:Tech Tech:Creating new Test Ticket for Customer Service<br>"

 var sanitizer = /<br>(?=[^0-9])/g;
 notes = notes.replace(sanitizer, "");
 var htmlString = '';
 notes = notes.split('<br>');
 notes.forEach(function(note) {
   var date = note.match(/\d{1,2}\/\d{1,2}\/\d{2,4}/g);
   var time = note.match(/\d{1,2}:\d{1,2}/g) + ' ' + note.match(/pm|am/i);
   var content = note.match(/[pm|am]\s?:/i);
   if (content) {
     content = note.substring(content.index + content[0].length).split(':');
     htmlString += '<p>' + date + ' at ' + time + '<br/>';
     var noteString = '';
     for (var i = 1; i < content.length; i++) {

       noteString += content[i] + ":";
     }
     htmlString += '<span class="font-weight-bold">' + content[0] + ':</span> ' + noteString.slice(0, -1) + '</p>';
   }
 });

 htmlString = '<div class="p-4"><span class="font-weight-bold">Notes To Date:</span><br />' + htmlString + '</div>';



 $(".notesList").html(htmlString);