Fix overlapping highlighter issues

Author: scriptcoded

index.js

@@ -21,7 +21,8 @@ const SPLIT_CHARS = '[^a-zA-Z_]'
 const highlighters = [
   {
     name: 'keyword',
-    regex: new RegExp(`(?:^|${SPLIT_CHARS})(?:${keywords.join('|')})(?=${SPLIT_CHARS}|$)`, 'g')
+    group: 1,
+    regex: new RegExp(`(^|${SPLIT_CHARS})(${keywords.join('|')})(?=${SPLIT_CHARS}|$)`, 'g')
   },
   {
     name: 'special',
@@ -54,13 +55,25 @@ function highlight (sqlString, options) {
   for (const hl of highlighters) {
     let match
 
-    // This is probably the one time when an assignment inside a condidion makes sense
+    // This is probably the one time when an assignment inside a condition makes sense
     // eslint-disable-next-line no-cond-assign
     while (match = hl.regex.exec(sqlString)) {
+      let text = match[0]
+      let boringLength = 0
+
+      // If a specific group is requested, use that group instead, and make sure
+      // we offset the index by the length of the preceding groups
+      if (hl.group) {
+        text = match[hl.group + 1]
+        for (let i = 1; i <= hl.group; i++) {
+          boringLength += match[i].length
+        }
+      }
+
       matches.push({
         name: hl.name,
-        start: match.index,
-        length: (hl.trimEnd ? match[0].substr(0, match[0].length - hl.trimEnd) : match[0]).length
+        start: match.index + boringLength,
+        length: (hl.trimEnd ? text.substr(0, text.length - hl.trimEnd) : text).length
       })
     }
   }

index.test.js

@@ -67,12 +67,12 @@ describe('unicode', () => {
 
   it('basic query', () => {
     expect(hlUni("SELECT * FROM `users` WHERE `email` = '[email protected]'"))
-      .toBe("[keyword]SELECT[clear] [special]*[clear][keyword] FROM[clear] [string]`users`[clear][keyword] WHERE[clear] [string]`email`[clear] [special]=[clear] [string]'[email protected]'[clear]")
+      .toBe("[keyword]SELECT[clear] [special]*[clear] [keyword]FROM[clear] [string]`users`[clear] [keyword]WHERE[clear] [string]`email`[clear] [special]=[clear] [string]'[email protected]'[clear]")
   })
 
   it('complex query', () => {
     expect(hlUni("SELECT COUNT(id), `id`, `username` FROM `users` WHERE `email` = '[email protected]' AND `foo` = 'BAR' OR 1=1"))
-      .toBe("[keyword]SELECT[clear] [function]COUNT[clear][bracket]([clear]id[bracket])[clear][special],[clear] [string]`id`[clear][special],[clear] [string]`username`[clear][keyword] FROM[clear] [string]`users`[clear][keyword] WHERE[clear] [string]`email`[clear] [special]=[clear] [string]'[email protected]'[clear][keyword] AND[clear] [string]`foo`[clear] [special]=[clear] [string]'BAR'[clear][keyword] OR[clear] [number]1[clear][special]=[clear][number]1[clear]")
+      .toBe("[keyword]SELECT[clear] [function]COUNT[clear][bracket]([clear]id[bracket])[clear][special],[clear] [string]`id`[clear][special],[clear] [string]`username`[clear] [keyword]FROM[clear] [string]`users`[clear] [keyword]WHERE[clear] [string]`email`[clear] [special]=[clear] [string]'[email protected]'[clear] [keyword]AND[clear] [string]`foo`[clear] [special]=[clear] [string]'BAR'[clear] [keyword]OR[clear] [number]1[clear][special]=[clear][number]1[clear]")
   })
 })
 
@@ -124,16 +124,16 @@ describe('html', () => {
 
   it('basic query', () => {
     expect(hlHtml("SELECT * FROM `users` WHERE `email` = '[email protected]'"))
-      .toBe("<span class=\"sql-hl-keyword\">SELECT</span> <span class=\"sql-hl-special\">*</span><span class=\"sql-hl-keyword\"> FROM</span> <span class=\"sql-hl-string\">`users`</span><span class=\"sql-hl-keyword\"> WHERE</span> <span class=\"sql-hl-string\">`email`</span> <span class=\"sql-hl-special\">=</span> <span class=\"sql-hl-string\">'[email protected]'</span>")
+      .toBe("<span class=\"sql-hl-keyword\">SELECT</span> <span class=\"sql-hl-special\">*</span> <span class=\"sql-hl-keyword\">FROM</span> <span class=\"sql-hl-string\">`users`</span> <span class=\"sql-hl-keyword\">WHERE</span> <span class=\"sql-hl-string\">`email`</span> <span class=\"sql-hl-special\">=</span> <span class=\"sql-hl-string\">'[email protected]'</span>")
   })
 
   it('complex query', () => {
     expect(hlHtml("SELECT COUNT(id), `id`, `username` FROM `users` WHERE `email` = '[email protected]' AND `foo` = 'BAR' OR 1=1"))
-      .toBe("<span class=\"sql-hl-keyword\">SELECT</span> <span class=\"sql-hl-function\">COUNT</span><span class=\"sql-hl-bracket\">(</span>id<span class=\"sql-hl-bracket\">)</span><span class=\"sql-hl-special\">,</span> <span class=\"sql-hl-string\">`id`</span><span class=\"sql-hl-special\">,</span> <span class=\"sql-hl-string\">`username`</span><span class=\"sql-hl-keyword\"> FROM</span> <span class=\"sql-hl-string\">`users`</span><span class=\"sql-hl-keyword\"> WHERE</span> <span class=\"sql-hl-string\">`email`</span> <span class=\"sql-hl-special\">=</span> <span class=\"sql-hl-string\">'[email protected]'</span><span class=\"sql-hl-keyword\"> AND</span> <span class=\"sql-hl-string\">`foo`</span> <span class=\"sql-hl-special\">=</span> <span class=\"sql-hl-string\">'BAR'</span><span class=\"sql-hl-keyword\"> OR</span> <span class=\"sql-hl-number\">1</span><span class=\"sql-hl-special\">=</span><span class=\"sql-hl-number\">1</span>")
+      .toBe("<span class=\"sql-hl-keyword\">SELECT</span> <span class=\"sql-hl-function\">COUNT</span><span class=\"sql-hl-bracket\">(</span>id<span class=\"sql-hl-bracket\">)</span><span class=\"sql-hl-special\">,</span> <span class=\"sql-hl-string\">`id`</span><span class=\"sql-hl-special\">,</span> <span class=\"sql-hl-string\">`username`</span> <span class=\"sql-hl-keyword\">FROM</span> <span class=\"sql-hl-string\">`users`</span> <span class=\"sql-hl-keyword\">WHERE</span> <span class=\"sql-hl-string\">`email`</span> <span class=\"sql-hl-special\">=</span> <span class=\"sql-hl-string\">'[email protected]'</span> <span class=\"sql-hl-keyword\">AND</span> <span class=\"sql-hl-string\">`foo`</span> <span class=\"sql-hl-special\">=</span> <span class=\"sql-hl-string\">'BAR'</span> <span class=\"sql-hl-keyword\">OR</span> <span class=\"sql-hl-number\">1</span><span class=\"sql-hl-special\">=</span><span class=\"sql-hl-number\">1</span>")
   })
 
   it('query with identifiers without apostrophes', () => {
     expect(hlHtml('SELECT id FROM users'))
-      .toBe('<span class="sql-hl-keyword">SELECT</span> id<span class="sql-hl-keyword"> FROM</span> users')
+      .toBe('<span class="sql-hl-keyword">SELECT</span> id <span class="sql-hl-keyword">FROM</span> users')
   })
 })