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
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:
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:
.– 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.”
+– This is a quantifier that specifies that the preceding character or group (in this case, the dot) should be matched one or more times.
(.+) 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:
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…
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.