Allow me to practice my understanding by explaining this in as much detail as I possibly can:
I also agree this test passes too easily, and although I figured out by myself what the “lesson” was to be learned here (understanding how * behaves vs *?).
Here is the original setup:
let text = "<h1>Winter is coming</h1>";
let myRegex = /<.*>/; // Change this line
let result = text.match(myRegex);
So what it is trying to teach is the default ‘greedy’ behavior vs the ‘?’ addition which makes it ‘lazy’.
Try to solve this without searching for the entire
<h1> tag, and instead try to get regex to select only the text between the first ‘<’ and the FIRST ‘>’.
With the provided regex /<.*>/, the regex is saying first find ‘<’ then, after any number of any character inside, the final character should be ‘>’. The ‘greedy’ behavior will first find
<h1> but unlike lazy behavior, will keep looking to see if there is another ‘>’ character. Since the string ends with a ‘>’ in the closing
</h1> tag, it takes the ‘greedier’ string, which is the entire
<h1>Winter is coming</h1>.
The goal should be to use virtually the same regex, ONLY add the ‘lazy’ instruction (’?’) so regex will stop after it meets the conditions for the first time (finding the FIRST closing ‘>’), and be ‘lazy’ and stop after the condition is met, even if other solutions are possible.
CAN’T GET SPOILER TAGS TO WORK FOR THE LIFE OF ME, SO SPOILERS BELOW!!
myRegex = /<.*?>/;
This regex is nearly identical to the one provided (myRegex = /<.*>/) except it stops immediately when it finds a string that starts with ‘<’, finds 0 or more of any characters, then ends with ‘>’. Remember ‘.’ is a wildcard for any character in regex, and the lazy marker should be applied to it, not after the closing ‘>’ since you want to be lazy about the number of ‘any characters’ it finds between the arrow brackets.