Trying to matchAll a regex on a JavaScript string

Question

I'm trying to string.matchAll the following string:

const text = 'textA [aaa](bbb) textB [ccc](ddd) textC'

I want to match the following:

• 1st: "textA [aaa](bbb)"
• 2nd: " textB [ccc](ddd)"
• 3rd: " textC"

NOTE: The capturing groups are already present in the regex. That's what I need.

It's almost working, but so far I couldn't think of a way to match the last part of the string, which is just " textC", and doesn't have the [*](*) pattern.

What am I doing wrong?

const text = 'textA [aaa](bbb) textB [ccc](ddd) textC'
const regexp = /(.*?)\[(.+?)\]\((.+?)\)/g;

const array = Array.from(text.matchAll(regexp));
console.log(JSON.stringify(array[0][0]));
console.log(JSON.stringify(array[1][0]));
console.log(JSON.stringify(array[2][0]));

UPDATE:

Besides the good solutions provided in the answers below, this is also an option:

const text= 'textA [aaa](bbb) textB [ccc](ddd) textC'

const regexp = /(?!$)([^[]*)(?:\[(.*?)\]\((.*?)\))?/gm;

const array = Array.from(text.matchAll(regexp));

console.log(array);

Answer 1

It's because there is no third match. After the first two matches, the only thing left in the string is "text C":

https://regex101.com/r/H9Kn0G/1/

to fix this, make the whole second part optional (also note the initial \w instead of . to prevent that dot from eating the whole string, as well as the "grouping only" parens used to surround the optional part, which keeps your match groups the same):

(\w+)(?:\s\[(.+?)\]\((.+?)\))?

https://regex101.com/r/Smo1y1/2/

Answer 2

Solution 1: Splitting through matching

You may split by matching the pattern and getting substrings from the previous index up to the end of the match:

const text = 'textA [aaa](bbb) textB [ccc](ddd) textC'
const regexp = /\[[^\][]*\]\([^()]*\)/g;
let m, idx = 0, result=[];
while(m=regexp.exec(text)) {
  result.push(text.substring(idx, m.index + m[0].length).trim());
  idx = m.index + m[0].length;
}
if (idx < text.length) {
  result.push(text.substring(idx, text.length).trim())
}
console.log(result);

Note:

• \[[^\][]*\]\([^()]*\) matches [, any 0+ chars other than [ and ] (with [^\][]*), then ](, then 0+ chars other than ( and ) (with [^()]*) and then a ) (see the regex demo)
• The capturing groups are removed, but you may restore them and save in the resulting array separately (or in another array) if needed
• .trim() is added to get rid of the leading/trailing whitespace (remove if not necessary).

Solution 2: Matching optional pattern

The idea is to match any chars before the pattern you have and then match either your pattern or end of string:

let result = text.match(/(?!$)(.*?)(?:\[(.*?)\]\((.*?)\)|$)/g);

If the string can have line breaks, replace . with [\s\S], or consider this pattern:

let result = text.match(/(?!$)([\s\S]*?)(?:\[([^\][]*)\]\(([^()]*)\)|$)/g);

See the regex demo.

JS demo:

const text = 'textA [aaa](bbb) textB [ccc](ddd) textC'
const regexp = /(?!$)(.*?)(?:\[(.*?)\]\((.*?)\)|$)/g;

const array = Array.from(text.matchAll(regexp));
console.log(JSON.stringify(array[0][0]));
console.log(JSON.stringify(array[1][0]));
console.log(JSON.stringify(array[2][0]));

Regex details

• (?!$) - not at the end of string
• (.*?) - Group 1: any 0+ chars other than line break chars as few as possible (change to [\s\S]*? if there can be line breaks or add s modifier since you target ECMAScript 2018)
• (?:\[(.*?)\]\((.*?)\)|$) - either of the two alternatives:
  • \[(.*?)\]\((.*?)\) - [, Group 2: any 0+ chars other than line break chars as few as possible, ](, Group 3: any 0+ chars other than line break chars as few as possible, and a )
  • | - or
  • $ - end of string.

Answer 3

That is what I've ended up using:

const text= 'textA [aaa](bbb) textB [ccc](ddd) textC'

const regexp = /(?!$)([^[]*)(?:\[(.*?)\]\((.*?)\))?/gm;

const array = Array.from(text.matchAll(regexp));

console.log(array);