javascript - The last string don't match the regex right

Question

I need som regex help. I have this code that i want to match.

var i1 = "<ul> {{#items}}<li>{{.}}</li>{{/items}} </ul>";
var i2 = "<ul> {{#items}}<li>{{.}}</li> <li><ul> {{#items}}<li>{{.}}</li>{{/items}} </ul></li>{{/items}} </ul>";
var i3 = "<ul> {{#items}}<li>{{.}}</li>{{/items}} </ul> <ul> {{#items}}<li>{{.}}</li>{{/items}} </ul>";


var reg = /{{(?:(?:#|!#)([\s\w\.-]+))}}+(.+(?:{{\/.+}}))/

i1 => ["{{#items}}<li>{{.}}</li>{{/items}}", "items", "<li>{{.}}</li>"]
i2 => ["{{#items}}<li>{{.}}</li> <li><ul> {{#items}}<li>{{.}}</li>{{/items}} </ul></li>{{/items}}", "items", "<li>{{.}}</li> <li><ul> {{#items}}<li>{{.}}</li>{{/items}} </ul></li>"]
i3 => ["{{#items}}<li>{{.}}</li>{{/items}} </ul> <ul> {{#items}}<li>{{.}}</li>{{/items}}", "items", "<li>{{.}}</li>{{/items}} </ul> <ul> {{#items}}<li>{{.}}</li>"]

The last one don't match that i want. I just want it to match the first ul#items and stop when the first {{/items}} comes. The reg works without html tags for the first two.

I need some help to figure out how to do the last one.

Thanks

Answer 1

Your pattern is greedy, meaning it will match the largest possible string. Use .*? and .+? instead of .* and .+. Check here for a more detailed explanation of the difference between the "greedy" and "lazy" operators.