React Ace Editor highlighting keywords in the middle of other words

Question

I am using the react ace editor. I have created a custom highlight rule as is documented elsewhere. The code is here:

export class CustomHighlightRules extends window.ace.acequire("ace/mode/text_highlight_rules").TextHighlightRules {
    constructor() {
      super();
      this.$rules = {
        start: [
          {
            token: "keyword",
            regex: "def"
          }
        ]
      };
    }
  }

The problem is that when I type something like def somedeftext into the editor, the word "def" in the very middle of "somedeftext" is highlighted incorrectly. What causes this behavior?

Answer 1

I found that changing the regex as follows works:

regex: "\\bdef\\b"