How To Convert A Plain Text List To An Array In JavaScript?

Imagine you have a list of text, maybe from a spreadsheet, and you need to convert that from plain text into a quoted and comma separated version that could be used in a JavaScript or TypeScript array. How can you achieve that?

Well, in this post we will cover three quick ways.

Let’s start off with our pretend list:

aaa
bbb
ccc

Of course your list will likely be longer than this, otherwise you could hand crank it and get on with your life.

In my case my list was 200 items long. Too many to do by hand.

Method 1: Use a Website

It turns out that you are not the first person to need to convert a plain text list into a list format that you can use in JavaScript / TypeScript … or Python, or any other language, really.

A quick Google, whilst writing this post, led me to a website called arrayThis, which gives you a nice text box and dumps out the output. Simple:

Fine, if you data is not PII or sensitive in any way. If it is, pasting it into a random website you found on Google is probably a no no.

Of course, my data was sensitive. So I had to find a different solution.

Method 2: Write Some Code

Aha, now we are talking.

Using code to solve our problems. Yes, the true way of the enlightened developer.

It’s nice to have little snippets like this on hand for just such an occassion:

// myScript.js

const plainText = `aaa
bbb
ccc`;

// Split the text into an array of lines
const lines = plainText.split('\n');

// Total fudge to add quotes and then convert back for display
const jsonArray = JSON.parse(JSON.stringify(lines));

console.log(jsonArray)Code language: JavaScript (javascript)

This is a bodge for sure, but it works quite nicely for such a simplistic use case such as in this kind of scripting style usage of JavaScript.

You can then run this:

node myScript.js
 
[ 'aaa', 'bbb', 'ccc' ]Code language: CSS (css)

You can copy / paste that back to your IDE or whatever, and on you go.

Method 3: Use RegEx

It turns out you didn’t even need to leave your IDE!

I use WebStorm, but this same approach works in all the IntelliJ suite. I’m sure it works in VSCode also, but haven’t got the specific steps.

First, create a new scratch file. You don’t need to do this, but it makes it slightly easier:

Press ctrl + R on the keyboard to bring up the ‘replace’ box:

What we will do is provide a regular expression (a RegEx) that contains a capture group, and then use the captured group to be the contents of our new, quoted output.

RegEx is complex voodoo, so I’ll do my best to explain it as we go.

There’s two things to do from the screenshot above.

Firstly, make sure you check the .* box to enable RegEx patterns in the input field. If you don’t do that, this won’t work.

Second, type in (.+) as your Search / input.

The regular expression (.+) consists of two parts:

1. . – This is a special character in regex that matches any character except for a newline character. It’s often referred to as the “dot” or “period.”
2. + – This is a quantifier that specifies that the preceding character or group (in this case, the dot) should be matched one or more times.

So, (.+) as a whole means:

• ( – Start of a capturing group: This group is used to capture the matched text so that you can refer to it in the replacement string.
• . – Match any character (except newline).
• + – Match one or more of the preceding character (any character).

In short this means that each line, highlighted in the screenshot above, has placed the captured (or highlighted) value into something we then use in our replacement. So let’s add in the replacement:

"$1",

Set this in your replacement bar:

Each captured group, of which there can be zero or more, can be referenced in the replacement using the dollar sign followed by the number in which order they were captured. You can get into naming these things, if your regex becomes more complex. I’ve never needed that… and hopefully never will. Regex is the dark arts, maaaan.

Anyway, WebStorm is kind enough to be giving us a preview of what the change is going to look like.

All we need to do is apply it:

And that updates the text:

Amusingly you can see WebStorm is now trying to re-apply the regex again so has updated the preview…

Wrapping Up

Three ways to quote our text.

In the end I used the RegEx approach. Less code, less bugs.

But it’s nice to have options.