JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr id="line">
  </tr>
</table>
<img src="https://www.developpez.net/forums/attachments/p283959d1496949089/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/modification-d-regex-existante/capture-d-ecran-2017-06-08-21.10.32.png/" />

CSS

td { border: solid 1px silver ;
  font-family: verdana;
  font-size: 10px;
  background-color: #ffffff;
  padding: 0 2px;
  }
table {
  border-collapse: collapse;
}

JavaScript

$ (function(){
chaine= "updi(event,'2017-06-04 16:00 CEST (T+ 0:00)<br>Distances:&nbsp;0.0nm/218.9nm<br><b>Wind:</b> 322&deg; 8.6 kt (<b>TWA 45&deg;</b>)<br><b>Heading:</b> 277&deg;<b>Sail:</b> Jib<br><b>Boat Speed:</b> 5.44 kts','220px')"

reg= /updi\(event,'(\d{4})-(\d{2})-(\d{2})\s([^ ]+)\s([^ ]+)\s\(([^)]+)\)[^\/]+\/(\d+\.\d+nm)[^ ]+\s(\d+&deg;)\s(\d+\.\d+ kt)[^\d]+(\d+&deg;)[^\d]+(\d+&deg;)[^ ]+ ([a-z]+)[^\d]+(\d+\.\d+ kts)/gi;

html=chaine.replace(reg,"<td>$3/$2/$1</td><td>$4</td><td>$5</td><td>$6</td><td>$7</td><td>$8</td><td>$9</td><td>$10</td><td>$11</td><td>$12</td><td>$13</td>")

$('#line').html(html);

})