How to Convert SRT to Text Using Regex in JavaScript

Would you like some help with converting SRT files (subtitle files) into readable text? After reading this article, you’ll be able to convert srt to text regex with javascript. Even the most inexperienced developers can quickly implement the code provided in this guide. If you want, you can access the complete example in this repository or see a working example by clicking here

In this article, I will guide you on using JavaScript to convert SRT to prose with the help of regular expressions (regex), a matching method, and console.log text.

If you need a stand-alone regex rule to do this parsing in other languages, here’s it.

/^\d+\n\d\d:\d\d:\d\d,\d{3} --> \d\d:\d\d:\d\d,\d{3}\n(?:<[a-z]+.*?>)?([\s\S]*?)(?:<\/[a-z]+>)?\n$/gm

HTML Code Overview

Let’s see the HTML code below I created for this example. It contains a form with an input field for selecting an SRT file and a button to trigger the conversion process. Three tabs in the output area, Transcript, Table View, and Prose View, will display the converted content.

Parsing SRT Files

We should understand the srt file contents and format to use a regular expression to extract the data we need. We’ll use a regular expression to convert the srt file to text. Let’s look inside an srt file with a text editor. I used Sublime Text to see srt file contents.

Then, let’s look at how to parse an SRT file using JavaScript. We will use the parseSrt function below to extract the text from the file. Then we’ll parse each subtitle block’s start time, end time, and text. After that, we’ll be able to convert srt to txt files.

Creating a Transcript View

We will generate the transcript view to create a transcript of the SRT file. In the generateTranscript function, we create a paragraph tag for each subtitle and join them to create a single string. We’ll print this string in the Transcript tab.

Creating a Table View

We have you covered if you want to create a table view of the SRT file. The generateTableView function generates a table with each subtitle’s start time, end time, and text. You will be able to see this table in the Table View tab.

Creating a Prose View

Finally, we will use generateProseView to create a single block of prose from the SRT file. In this function, we join the text of each subtitle and pass it to the Prose View tab for display.

JavaScript Code Overview

To implement these functions, we will be using the jQuery library. We have also included the Bootstrap 5 CSS and JS files to enhance the styling of our HTML.

The JavaScript code consists of two main sections. The first section handles file selection and validation, and the second section handles the conversion process. The FileReader object will help us to read the selected SRT file.

Then we’ll pass the contents of the file to the parseSrt function. The output from parseSrt is then passed to the three functions we created earlier.

Converting SRT files to readable text can be easily accomplished with JavaScript. Using regular expressions, a matching method, and console.log text, you can convert an SRT file to prose, a transcript, and a table view. We have provided you with a comprehensive guide on accomplishing this task, so go ahead and try it.