Regex thinks I'm nesting, but I'm not

Question

I wrote this regexp to capture the strings below.

\!\[(.*?)?\]

All the strings below should match and return an optional string that's inside the first set of square brackets.

![]
![caption]
![]()
![caption]()
![caption][]

The problem is that this string also matches and returns ][ because the regex thinks it's between the first [ and last ].

![][] // Should not match, but does and returns "]["

How do I fix this?

Answer 1

Just remove the ? outside (.*?), that is redundant.

var myArray = ["![abc]","![caption]", "![def]()", "![caption]()","![caption][]"];
myArray.forEach(function(current) {
    console.log(/!\[(.*?)\]/.exec(current)[1]);
});

Output

abc
caption
def
caption
caption

Check how the RegEx works here

Answer 2

Use this regex:

\!\[([^\]]*)\]

It means that it expects a "last" ] but makes internal ones invalid. This should solve your issue.

Answer 3

My preference is this if you want to ignore catching the things like this ![[]]

\!\[([^\[\]]*)\]