When it’s a workable option, the better solution is to split the task in two: search for comments, and then search within those comments for TODO.

Here’s how you can find comments:

<!--.*?-->

Standard JavaScript doesn’t have a “dot matches line breaks” option, but you can use an all-inclusive character class in place of the dot, as follows:

<!--[sS]*?-->

For each comment you find using one of the regexes just shown, you can then search within the matched text for the literal characters ‹TODO›. If you prefer, you can make it a case-insensitive regex with word boundaries on each end to make sure that only the complete word TODO is matched, like so:

TODO

Follow the code in Recipe 3.13 to search within matches of an outer regex.

Lookahead (described in Recipe 2.16) lets you solve this problem with a single regex, albeit less efficiently. In the following regex, positive lookahead is used to make sure that the word TODO is followed by the closing comment delimiter -->. On its own, that doesn’t tell whether the word appears within a comment or is simply followed by a comment, so a nested negative lookahead is used to ensure that the opening comment delimiter <!-- does not appear before the -->:

TODO(?=(?:(?!<!--).)*?-->)

Since standard JavaScript doesn’t have a “dot matches line breaks” option, use ‹[sS]› in place of the dot:

TODO(?=(?:(?!<!--)[sS])*?-->)

Recipe 3.13 shows the code you need to search within matches of another regex. It takes an inner and outer regex. The comment regex serves as the outer regex, and ‹TODO› as the inner regex. The main thing to note here is the lazy ‹*?› quantifier that follows the dot or character class in the comment regex. As explained in Recipe 2.13, that lets you match up to the first --> (the one that ends the comment), rather than the very last occurrence of --> in your subject string.

This solution is more complex, and slower. On the plus side, it combines the two steps of the previous approach into one regex. Thus, it can be used when working with a text editor, IDE, or other tool that doesn’t allow searching within matches of another regex.

Let’s break this regex down in free-spacing mode, and take a closer look at each part:

 TODO       # 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 ‹TODO(?=.*?-->)› (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 ‹TODO(?=.*?-->)›—with the second ‹› 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 ‹TODO(?=.*?-->)› 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: ‹TODO(?=(?:(?!<!--).)*?-->)›. In JavaScript, which lacks the necessary “dot matches line breaks” option, ‹TODO(?=(?:(?!<!--)[sS])*?-->)› is equivalent.