Regex working on regex101.com, but not in my codepen?

Hello. This is for the wikipedia viewer project. I’m trying to go above and beyond and basically parse the wikipedia article and to display it on my own project. So a user types in a search query, and my code successfully gets back a JSON of the whole wikipedia article, For example, like this wikipedia article on carrots.. So far so good.

But when I try to use regular expressions to highlight just the “taxobox” it highlights the whole article in my codepen, starting from taxobox. When I typed in my regular expression into regex101.com, it works as intended.

Here’s a link to the regex101.com in question, but you have to type in my regex manually to see what I mean: /{{\S\S\S\Sbox[\S\s]+}}\n\n/

The worst thing is that it worked last week, but I somehow broke it and I don’t remember how. Here’s my codepen.

Why does it work in regex101.com, but not on codepen? Please help me understand regular expressions

Hey there,

I just had a quick look at your code. I had your rawData variable printed to the console and then searched ‘hello’ from your search bar. After opening the console and manually searching for ‘box’ I found no matches. Are you expecting every search to have a match for this string?

Thanks for your reply! Yeah, not every wikipedia article has a side information box, so I don’t expect it. But for articles that do, like “carrot” in my example above, there exists such a box. I think most wikipedia articles have such a box.

Hmm, it seems to be matching for me when I search ‘carrot’ but not for ‘carrots’.

It does match, but it appears to match the rest of the article as well, when it shouldn’t. Does it ONLY match the box, or the whole article?

Aww, I see. I think the issue here is that regex will not stop at the first instance of the closing curly braces, instead it will try to find a longer match. To prevent this I changed the regex to:

var infoboxRegex = /{{\S\S\S\Sbox[^\{]+}}/

This will not include any curly braces besides your first two opening and last two closing.

1 Like

That did the trick. Thanks so much @RadDog25