javascript：如何使用空格分割此命令行字符串，但args包含空格

Question

the command line string I am trying to parse is as such:

   screenshotz [ 'li[title="about us"] a', 3,2 ] 
div.react-bs-container-body tr > td:nth-child(1)

I am expecting the following 3 items in a list:

    [`screenshotz`,`['li[title="about us"] a', 3,2]`,
 `div.react-bs tr > td:nth-child(1)`]

I am doing a command.split(/[Az] /g) , however, I end up with much more than 3, it takes account into every single space inside the second and last argument.

Essentially I need to allow just about any type of characters, however one clear rule is that a user can submit without the [ ... ] characters:

screenshot div.react-bs-container-body tr > td:nth-child(1)

which should return [screenshot, div.react-bs....]

It always follows this rule, the [...] cannot come after the css selectors.

How can I make split a string using the spaces on the "outside" and not inside the individual argument parameter in a command?

So it shouldn't split a space in an argument parameter string. for instance that css has a ton of space but it should all be one arg param.

Answer 1

Your regular expression is causing the string to be split on any alpha characters followed by space. You need to break down the command line string into its components:

1. screenshot at the beginning of the string, followed by a space.
2. Optionally, anything contained within square brackets [...]
3. Another, optional space, then everything else until the end of the string.

Each of these components, grouped in RegEx, can be represented by:

1. (screenshot)␠
2. (\\[.+\\])?

3. ␠?(.+)

   (screenshot).+?([.+]) ?(.+)

I am assuming the z in screenshotz is a typo.

Using split results in blank results at the start and end of the array, instead, I recommend using matchAll :

command = `screenshot [ 'li[title="about us"] a', 3,2 ]
div.react-bs-container-body tr > td:nth-child(1)`
Array.from(command.matchAll(/(screenshot) (\[.+\]) ?(.+)/sg))

The result is:

Array(4)
0: "screenshot [ 'li[title="about us"] a', 3,2 ] ↵div.react-bs-container-body tr > td:nth-child(1)"
1: "screenshot"
2: "[ 'li[title="about us"] a', 3,2 ]"
3: "↵div.react-bs-container-body tr > td:nth-child(1)"