JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <textarea id="source">1
00:00:01,000 --> 00:00:04,000
Descargados de www.AllSubs.org

2
00:00:49,581 --> 00:00:52,049
Bueno, tienes que escapar, tengo que ir a jugar

3
00:00:52,084 --> 00:00:55,178
Tengo que encontrar un día que está lleno de nada más que sol

4
00:00:55,220 --> 00:00:57,552
Crucero por la calle, moviéndose al compás

5
00:00:57,589 --> 00:01:00,683
Todos los que conoces está teniendo nada más que diversión

6
00:01:00,726 --> 00:01:03,251
Deja todo detrás de ti

7
00:01:03,295 --> 00:01:06,128
Siente esas palmeras soplan

8
00:01:06,165 --> 00:01:09,157


9
00:01:09,201 --> 00:01:11,829
Están fuera de palear la nieve

10
00:01:11,870 --> 00:01:14,998
El tiempo para moverse, pero no seas lento

11
00:01:15,040 --> 00:01:17,941
En sus marcas, prepárate para ir</textarea>
  <button id="doParse">Do Parse</button>
</div>

<div class="wrapper">
<table id="result">
	<thead>
		<tr>
			<th>Line</th>
			<th>startTime</th>
			<th>endTime</th>
			<th>Text</th>
		</tr>
	</thead>
	<tbody><tr><td colspan="4">...</td></tr></tbody>
</table>
</div>

CSS

*{margin:0;padding:0;}
.wrapper{
  width: 100%;
  padding:20px;
  box-sizing:border-box;
}

#source {
  width:100%;
  height: 300px;
}
#result{
  width:100%;
}
#result,
#result td {
  border: 1px solid #000;
}

JavaScript

/* https://stackoverflow.com/questions/33145762/parse-a-srt-file-with-jquery-javascript/33147421 */
var PF_SRT = function() {
  var pattern = /(\d+)\n([\d:,]+)\s+-{2}\>\s+([\d:,]+)\n([\s\S]*?(?=\n{2}|$))/gm;
  var _regExp;

  var init = function() {
    _regExp = new RegExp(pattern);
  };
  var parse = function(f) {
    if (typeof(f) != "string")
      throw "Sorry, Parser accept string only.";

    var result = [];
    if (f == null)
      return _subtitles;

    f = f.replace(/\r\n|\r|\n/g, '\n')

    while ((matches = pattern.exec(f)) != null) {
      result.push(toLineObj(matches));
    }
    return result;
  }
  var toLineObj = function(group) {
    return {
      line: group[1],
      startTime: group[2],
      endTime: group[3],
      text: group[4]
    };
  }
  init();
  return {
    parse: parse
  }
}();

$(function() {
  $("#doParse").on('click', function() {
    try {
    	var text = $("#source").val();
      var result = PF_SRT.parse(text);
      var wrapper = $("#result tbody");
      wrapper.html('');
      for (var line in result) {
        var obj = result[line];
        wrapper.append("<tr><td>" + obj.line + "</td><td>" + obj.startTime + "</td><td>" + obj.endTime + "</td><td>" + obj.text + "</td></tr>");
      }
    } catch (e) {
      alert(e);
    }
  });
  $("#doParse").click();
});