add wholeWordMatch option

Author: naort

src/components/highlightChunks.js

@@ -3,7 +3,7 @@ import { indicesOf, mergeRange } from '../utils';
 export default function highlightChunks(
   text,
   queriesOrQuery,
-  { caseSensitive = false, diacriticsSensitive = false } = {},
+  { caseSensitive = false, diacriticsSensitive = false, wholeWordMatch = false } = {},
 ) {
   let queries = queriesOrQuery;
   if (typeof queriesOrQuery === 'string' || queriesOrQuery instanceof RegExp) {
@@ -19,7 +19,7 @@ export default function highlightChunks(
   const matches = [];
 
   queries.forEach((query) => {
-    matches.push(...indicesOf(text, query, { caseSensitive, diacriticsSensitive }));
+    matches.push(...indicesOf(text, query, { caseSensitive, diacriticsSensitive, wholeWordMatch }));
   });
 
   const highlights = mergeRange(matches);

src/components/index.vue

@@ -9,6 +9,7 @@ export default {
     queries: [Array, String, RegExp],
     caseSensitive: Boolean,
     diacriticsSensitive: Boolean,
+    wholeWordMatch: Boolean,
     highlightStyle: classAndStyleTypes,
     highlightClass: classAndStyleTypes,
     highlightComponent: {
@@ -83,8 +84,9 @@ export default {
         queries,
         caseSensitive,
         diacriticsSensitive,
+        wholeWordMatch,
       } = this;
-      return highlightChunks(text, queries, { caseSensitive, diacriticsSensitive });
+      return highlightChunks(text, queries, { caseSensitive, diacriticsSensitive, wholeWordMatch });
     },
   },
 };

src/utils/indicesOf.js

@@ -1,10 +1,16 @@
 import cloneRegexp from 'clone-regexp';
 import diacritics from 'diacritics';
 
+
+const isDigit = char => /^\d+$/.test(char);
+const isLetter = char => char.toUpperCase() !== char.toLowerCase() || char.codePointAt(0) > 127;
+const isLetterOrDigit = char => isLetter(char) || isDigit(char);
+
+
 export default function indicesOf(
   text,
   searchStringOrRegex,
-  { caseSensitive = false, diacriticsSensitive = false } = {},
+  { caseSensitive = false, diacriticsSensitive = false, wholeWordMatch = false } = {},
 ) {
   if (searchStringOrRegex instanceof RegExp) {
     const re = cloneRegexp(searchStringOrRegex, { global: true });
@@ -47,5 +53,18 @@ export default function indicesOf(
     index = strCpy.indexOf(searchStringCpy, index + 1);
   }
 
+  if (wholeWordMatch) {
+    const strLength = strCpy.length;
+    return indices.filter((range) => {
+      const [start, end] = range;
+      const idxBefore = start - 1;
+      const idxAfter = end;
+      const idxBeforeIsLetterOrDigit = idxBefore > 0 && isLetterOrDigit(strCpy[idxBefore]);
+      const idxAfterIsLetterOrDigit = idxAfter < strLength && isLetterOrDigit(strCpy[idxAfter]);
+      debugger;
+      return !(idxAfterIsLetterOrDigit || idxBeforeIsLetterOrDigit);
+    });
+  }
+
   return indices;
 }

test/unit/specs/highlightChunks.spec.js

@@ -158,4 +158,23 @@ describe('highlightChunks', () => {
       },
     ]);
   });
+  test('should match whole word not part of other word', () => {
+    const text = 'example amp';
+    const string = 'amp';
+
+    const chunks = highlightChunks(text, string, { wholeWordMatch: true });
+    console.log(chunks);
+    expect(chunks)
+      .toEqual([
+        {
+          isHighlighted: false,
+          text: 'example ',
+        },
+        {
+          isHighlighted: true,
+          text: 'amp',
+          highlightIndex: 0,
+        },
+      ]);
+  });
 });

web/App.vue

@@ -4,7 +4,8 @@
     <h1>
       <text-highlight
         queries="highlight"
-        highlightClass="titleHighlight">vue text highlight</text-highlight>
+        highlightClass="titleHighlight">vue text highlight
+      </text-highlight>
     </h1>
     <div class="card">
       <div class="inputs">
@@ -17,27 +18,40 @@
             <check-box
               :defaultValue="split"
               @onchange="updateSplit"
-              class="checkBox">Split by space</check-box>
+              class="checkBox">Split by space
+            </check-box>
           </div>
           <div class="column">
             <check-box
               :defaultValue="custom"
               @onchange="updateCustom"
-              class="checkBox">Custom component</check-box>
+              class="checkBox">Custom component
+            </check-box>
           </div>
         </div>
         <div class="row">
           <div class="column">
             <check-box
               :defaultValue="caseSensitive"
               @onchange="updateCaseSensitive"
-              class="checkBox">Case sensitive</check-box>
+              class="checkBox">Case sensitive
+            </check-box>
           </div>
           <div class="column">
             <check-box
               :defaultValue="diacriticsSensitive"
               @onchange="updateDiacriticsSensitive"
-              class="checkBox">Diacritics sensitive</check-box>
+              class="checkBox">Diacritics sensitive
+            </check-box>
+          </div>
+        </div>
+        <div class="row">
+          <div class="column">
+            <check-box
+              :defaultValue="wholeWordMatch"
+              @onchange="updateWholeWordMatch"
+              class="checkBox">Match Whole Word
+            </check-box>
           </div>
         </div>
       </div>
@@ -46,7 +60,9 @@
         :split="split"
         :custom="custom"
         :caseSensitive="caseSensitive"
-        :diacriticsSensitive="diacriticsSensitive"></example-document>
+        :diacriticsSensitive="diacriticsSensitive"
+        :wholeWordMatch="wholeWordMatch"
+      ></example-document>
     </div>
   </div>
 </template>
@@ -74,6 +90,7 @@ export default {
       custom: false,
       caseSensitive: false,
       diacriticsSensitive: false,
+      wholeWordMatch: false,
     };
   },
   methods: {
@@ -92,6 +109,9 @@ export default {
     updateDiacriticsSensitive(val) {
       this.diacriticsSensitive = val;
     },
+    updateWholeWordMatch(val) {
+      this.wholeWordMatch = val;
+    },
   },
 };
 </script>
@@ -101,17 +121,20 @@ body {
   background-color: #FAFAFA;
   margin: 0;
 }
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 5%;
+
   .titleHighlight {
     background-color: #42b983;
     color: #FFFFFFF0;
   }
+
   .card {
     width: 500px;
     max-width: 100vw;
@@ -122,17 +145,20 @@ body {
     padding-bottom: 30px;
     border-radius: 5px;
     box-sizing: border-box;
-    box-shadow: 0 20px 50px rgba(0,0,0,.1);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
   }
+
   .inputs {
     margin-bottom: 20px;
     padding: 15px;
     border-bottom: 1px solid rgba(0, 0, 0, .1);
+
     .textField {
       flex-grow: 1;
       padding-bottom: 10px;
       width: 100%;
     }
+
     .row {
       display: flex;
       flex-direction: row;

web/components/ExampleDocument.vue

@@ -19,6 +19,7 @@
         :displayHoverMe="true"
         :caseSensitive="caseSensitive"
         :diacriticsSensitive="diacriticsSensitive"
+        :wholeWordMatch="wholeWordMatch"
       >
         {{ textEnglish }}
       </text-highlight>
@@ -33,6 +34,7 @@
         :displayHoverMe="true"
         :caseSensitive="caseSensitive"
         :diacriticsSensitive="diacriticsSensitive"
+        :wholeWordMatch="wholeWordMatch"
       >
         {{ textSpanish }}
       </text-highlight>
@@ -46,6 +48,7 @@
         :activeIndex="activeIndex"
         :caseSensitive="caseSensitive"
         :diacriticsSensitive="diacriticsSensitive"
+        :wholeWordMatch="wholeWordMatch"
       >
         {{ html }}
       </text-highlight>
@@ -65,6 +68,7 @@ export default {
     custom: Boolean,
     caseSensitive: Boolean,
     diacriticsSensitive: Boolean,
+    wholeWordMatch: Boolean,
   },
   components: {
     TextHighlight,