CodeMirror: Gotcha!

Now i know why in the documentation they say to always use RegExp with the “^” sign at the start of each match.

Today i got an issue which at first i thought it was a CodeMirror’s bug. But then i realized i was missing this symbol in part of my RegExps.

How this error was detected? I was seeing keywords from my custom highlighter being marked with the wrong colors. For example, i had one that made all the numbers display with blue color. But when playing a rround with the typing on the editor, i noticed that sometimes a letter would be displayed as blue, why? THis is why…

Example to reproduce the “gotcha”:

Line example: “Hello, testing 12345 numbers and testing.”

Custom mode’s rules example: HIghlight “Hello” strings with red and Numbers with blue.

At the start of the parsing CodeMirror would take that first line of text and pass it to my custommode, resulting in the “Hello” being tokenized and highlighted in red (because in that regexp i did typed the ^ symbol). So now the parser takes the next chunk of text and pass it to my parser. The new token/stream is now:

, testing 12345 numbers and testing.

With this token, my custom mode will match my Number matching regexp:


Because i forgotted to start the regexp with ^ (start of line symbol) the regexp would find “12345” in the token.  “12345” is 5 characters long. So when you do this:

var match = stream.match(/\d+/);

The parser will change the length of the current token from it’s start to 5 characters long, resulting in this:

, testing 123 numbers and testing.

So the next token now would be:

ting 12345 numbers and testing.

And so on, the bug would generate a very weird looking result. This is because the regexp should match always fromthe start of the token itself, which is always chunk of text starting at “^”

So, using this would work as espected:



Hello, testing 12345 numbers and testing.