From 4cad266d529b1d45a2797419b8ce07b0d60da3bf Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Tue, 7 May 2019 10:41:26 -0600
Subject: [PATCH] Add searching by case sensitive and exact

---
 index.html               | 13 +++++++++++++
 src/js/search.js         | 29 ++++++++++++++++++++++-------
 src/js/setupListeners.js | 14 +++++++++++++-
 3 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index c5bb4b3..9a83569 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,19 @@
           </a>
         </section>
         <footer id="searchOptions" style="display:none;">
+          <div class="split">
+            <div class="quarter category">
+              <h3>Search For</h3>
+            </div>
+            <div class="three-quarter options">
+              <label>Case-Sensitive
+                <input type="checkbox" id="searchCaseSensitive">
+              </label>
+              <label>Exact Words
+                <input type="checkbox" id="searchExactWords">
+              </label>
+            </div>
+          </div>
           <div class="split">
             <div class="quarter category">
               <h3>Include in Search</h3>
diff --git a/src/js/search.js b/src/js/search.js
index f249027..9e024a7 100644
--- a/src/js/search.js
+++ b/src/js/search.js
@@ -6,6 +6,8 @@ export function getSearchTerm() {
 
 export function getSearchFilters() {
   const filters = {
+    caseSensitive: document.getElementById('searchCaseSensitive').checked,
+    exact: document.getElementById('searchExactWords').checked,
     name: document.getElementById('searchIncludeName').checked,
     definition: document.getElementById('searchIncludeDefinition').checked,
     details: document.getElementById('searchIncludeDetails').checked,
@@ -26,7 +28,7 @@ export function getSearchFilters() {
 }
 
 export function getMatchingSearchWords() {
-  const searchTerm = getSearchTerm();
+  let searchTerm = getSearchTerm();
   const filters = getSearchFilters();
   if (searchTerm !== '' || !filters.allPartsOfSpeechChecked) {
     const matchingWords = window.currentDictionary.words.slice().filter(word => {
@@ -37,9 +39,20 @@ export function getMatchingSearchWords() {
       }
       return true;
     }).filter(word => {
-      const isInName = filters.name && new RegExp(searchTerm, 'g').test(word.name);
-      const isInDefinition = filters.definition && new RegExp(searchTerm, 'g').test(word.simpleDefinition);
-      const isInDetails = filters.details && new RegExp(searchTerm, 'g').test(word.longDefinition);
+      searchTerm = filters.caseSensitive ? searchTerm : searchTerm.toLowerCase();
+      const name = filters.caseSensitive ? word.name : word.name.toLowerCase();
+      const simpleDefinition = filters.caseSensitive ? word.simpleDefinition : word.simpleDefinition.toLowerCase();
+      const longDefinition = filters.caseSensitive ? word.longDefinition : word.longDefinition.toLowerCase();
+
+      const isInName = filters.name
+        && (filters.exact
+          ? searchTerm == name
+          : new RegExp(searchTerm, 'g').test(name));
+      const isInDefinition = filters.definition
+        && (filters.exact
+          ? searchTerm == simpleDefinition
+          : new RegExp(searchTerm, 'g').test(simpleDefinition));
+      const isInDetails = filters.details && new RegExp(searchTerm, 'g').test(longDefinition);
       return searchTerm === '' || isInName || isInDefinition || isInDetails;
     });
     return matchingWords;
@@ -51,10 +64,12 @@ export function getMatchingSearchWords() {
 export function highlightSearchTerm(word) {
   const searchTerm = getSearchTerm();
   if (searchTerm) {
+    const filters = getSearchFilters();
+    const regexMethod = 'g' + (filters.caseSensitive ? '' : 'i');
     const markedUpWord = cloneObject(word);
-    markedUpWord.name = markedUpWord.name.replace(new RegExp(searchTerm, 'g'), `<mark>${searchTerm}</mark>`);
-    markedUpWord.simpleDefinition = markedUpWord.simpleDefinition.replace(new RegExp(searchTerm, 'g'), `<mark>${searchTerm}</mark>`);
-    markedUpWord.longDefinition = markedUpWord.longDefinition.replace(new RegExp(searchTerm, 'g'), `<mark>${searchTerm}</mark>`);
+    markedUpWord.name = markedUpWord.name.replace(new RegExp(`(${searchTerm})`, regexMethod), `<mark>$1</mark>`);
+    markedUpWord.simpleDefinition = markedUpWord.simpleDefinition.replace(new RegExp(`(${searchTerm})`, regexMethod), `<mark>$1</mark>`);
+    markedUpWord.longDefinition = markedUpWord.longDefinition.replace(new RegExp(`(${searchTerm})`, regexMethod), `<mark>$1</mark>`);
     return markedUpWord;
   }
   return word;
diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js
index b761d33..867ebd3 100644
--- a/src/js/setupListeners.js
+++ b/src/js/setupListeners.js
@@ -78,7 +78,9 @@ function setupEditFormButtons() {
 function setupSearchBar() {
   const searchBox = document.getElementById('searchBox'),
     clearSearchButton = document.getElementById('clearSearchButton'),
-    openSearchModal = document.getElementById('openSearchModal');
+    openSearchModal = document.getElementById('openSearchModal'),
+    searchExactWords = document.getElementById('searchExactWords'),
+    searchIncludeDetails = document.getElementById('searchIncludeDetails');
   searchBox.addEventListener('change', () => {
     renderWords();
   });
@@ -93,6 +95,16 @@ function setupSearchBar() {
   openSearchModal.addEventListener('click', () => {
     document.getElementById('searchModal').style.display = 'block';
   });
+
+  searchExactWords.addEventListener('change', () => {
+    if (searchExactWords.checked) {
+      searchIncludeDetails.checked = false;
+      searchIncludeDetails.disabled = true;
+    } else {
+      searchIncludeDetails.disabled = false;
+      searchIncludeDetails.checked = true;
+    }
+  });
 }
 
 export function setupSearchFilters() {