\b TODO \b      # Match the characters "TODO", as a complete word
(?=             # Followed by:
  (?:           #   Group but don't capture:
    (?! <!-- )  #     Not followed by: "<!--"
    .           #     Match any single character
  )*?           #   Repeat zero or more times, as few as possible (lazy)
  -->           #   Match the characters "-->"
)

This commented version of the regex doesn’t work in JavaScript unless you use the XRegExp library, since standard JavaScript lacks both “free-spacing” and “dot matches line breaks” modes.

Notice that the regex contains a negative lookahead nested within an outer, positive lookahead. That lets you require that any match of TODO is followed by --> and that <!-- does not occur in between.

If it’s clear to you how all of this works together, great: you can skip the rest of this section. But in case it’s still a little hazy, let’s take another step back and build the outer, positive lookahead in this regex step by step.

Let’s say for a moment that we simply want to match occurrences of the word TODO that are followed at some point in the string by -->. That gives us the regex ‹\bTODO\b(?=.*?-->)› (with “dot matches line breaks” enabled), which matches the underlined text in <!--TODO--> just fine. We need the ‹.*?› at the beginning of the lookahead, because otherwise the regex would match only when TODO is immediately followed by -->, with no characters in between. The ‹*?› quantifier repeats the dot zero or more times, as few times as possible, which is great since we only want to match until the first following -->.

As an aside, the regex so far could be rewritten as ‹\bTODO(?=.*?-->)\b›—with the second ‹\b› moved after the lookahead—without any affect on the text that is matched. That’s because both the word boundary and the lookahead are zero-length assertions (see Lookaround). However, it’s better to place the word boundary first for readability and efficiency. In the middle of a partial match, the regex engine can more quickly test a word boundary, fail, and move forward to try the regex again at the next character in the string without having to spend time testing the lookahead when it isn’t necessary.

OK, so the regex ‹\bTODO\b(?=.*?-->)› seems to work fine so far, but what about when it’s applied to the subject string TODO <!--separate comment-->? The regex still matches TODO since it’s followed by -->, even though TODO is not within a comment this time. We therefore need to change the dot within the lookahead from matching any character to matching any character that is not part of the string <!--, since that would indicate the start of a new comment. We can’t use a negated character class such as ‹[^<!-]›, because we want to allow <, !, and - characters that are not grouped into the exact sequence <!--.

That’s where the nested negative lookahead comes in. ‹(?!<!--).› matches any single character that is not part of an opening comment delimiter. Placing that pattern within a noncapturing group as ‹(?:(?!<!--).)› allows us to repeat the whole sequence with the lazy ‹*?› quantifier we’d previously applied to just the dot.

Putting it all together, we get the final regex that was listed as the solution for this problem: ‹\bTODO\b(?=(?:(?!<!--).)*?-->)›. In JavaScript, which lacks the necessary “dot matches line breaks” option, ‹\bTODO\b(?=(?:(?!<!--)[\s\S])*?-->)› is equivalent.