Highlight search terms in results; add cloneObject helper

src/helpers.js

@@ -1,3 +1,7 @@
+export function cloneObject(object) {
+  return JSON.parse(JSON.stringify(object));
+}
+
 export function removeTags(html) {
 var tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*';
 
@@ -19,4 +23,4 @@ var tagOrComment = new RegExp(
     html = html.replace(tagOrComment, '');
   } while (html !== oldHtml);
   return html.replace(/</g, '&lt;');
-}
+}

src/index.js

@@ -3,10 +3,11 @@ import './main.scss';
 import { DEFAULT_DICTIONARY } from './constants';
 import setupListeners from './js/setupListeners';
 import { renderAll } from './js/render';
+import { cloneObject } from './helpers';
 
 function initialize() {
   console.log('initializing');
-  window.currentDictionary = JSON.parse(JSON.stringify(DEFAULT_DICTIONARY));
+  window.currentDictionary = cloneObject(DEFAULT_DICTIONARY);
   setupListeners();
   renderAll();
 }

src/js/render.js

@@ -1,6 +1,6 @@
 import md from 'snarkdown';
 import { removeTags } from '../helpers';
-import { getWordsStats, wordExists, getMatchingSearchWords } from './utilities';
+import { getWordsStats, wordExists, getMatchingSearchWords, highlightSearchTerm } from './utilities';
 import { showSection } from './displayToggles';
 
 export function renderAll() {
@@ -94,32 +94,37 @@ export function renderPartsOfSpeechSelect() {
 export function renderWords() {
   const words = getMatchingSearchWords();
   let wordsHTML = '';
-  words.forEach(word => {
-    let detailsMarkdown = removeTags(word.longDefinition);
+  words.forEach(originalWord => {
+    let detailsMarkdown = removeTags(originalWord.longDefinition);
     const references = detailsMarkdown.match(/\{\{.+?\}\}/g);
     if (references && Array.isArray(references)) {
       new Set(references).forEach(reference => {
-        console.log(reference);
         const wordToFind = reference.replace(/\{\{|\}\}/g, '');
         const existingWordId = wordExists(wordToFind, true);
         if (existingWordId !== false) {
           const wordMarkdownLink = `[${wordToFind}](#${existingWordId})`;
-          console.log(wordMarkdownLink);
           detailsMarkdown = detailsMarkdown.replace(new RegExp(reference, 'g'), wordMarkdownLink);
         }
       });
     }
-    console.log(detailsMarkdown);
+    const word = highlightSearchTerm({
+      name: removeTags(originalWord.name),
+      pronunciation: removeTags(originalWord.pronunciation),
+      partOfSpeech: removeTags(originalWord.partOfSpeech),
+      simpleDefinition: removeTags(originalWord.simpleDefinition),
+      longDefinition: detailsMarkdown,
+      wordId: originalWord.wordId,
+    });
     wordsHTML += `<article class="entry" id="${word.wordId}">
       <header>
-        <h4 class="word">${removeTags(word.name)}</h4>
-        <span class="pronunciation">${removeTags(word.pronunciation)}</span>
-        <span class="part-of-speech">${removeTags(word.partOfSpeech)}</span>
+        <h4 class="word">${word.name}</h4>
+        <span class="pronunciation">${word.pronunciation}</span>
+        <span class="part-of-speech">${word.partOfSpeech}</span>
       </header>
       <dl>
-        <dt class="definition">${removeTags(word.simpleDefinition)}</dt>
+        <dt class="definition">${word.simpleDefinition}</dt>
         <dd class="details">
-          ${md(detailsMarkdown)}
+          ${md(word.longDefinition)}
         </dd>
       </dl>
     </article>`;

src/js/utilities.js

@@ -1,8 +1,8 @@
-const { currentDictionary } = window;
+import { cloneObject } from '../helpers';
 
 export function getWordsStats() {
-  const {words, partsOfSpeech} = currentDictionary;
-  const {caseSensitive} = currentDictionary.settings;
+  const {words, partsOfSpeech} = window.currentDictionary;
+  const {caseSensitive} = window.currentDictionary.settings;
   
   const wordStats = {
     numberOfWords: [
@@ -99,13 +99,29 @@ export function wordExists(word, returnId = false) {
   return foundWord ? (returnId ? foundWord.wordId : true) : false;
 }
 
+export function getSearchTerm() {
+  return document.getElementById('searchButton').value;
+}
+
 export function getMatchingSearchWords() {
-  const searchTerm = document.getElementById('searchButton').value.trim();
-  const matchingWords = window.currentDictionary.words.filter(word => {
+  const searchTerm = getSearchTerm();
+  const matchingWords = window.currentDictionary.words.slice().filter(word => {
     const isInName = new RegExp(searchTerm, 'g').test(word.name);
     const isInDefinition = new RegExp(searchTerm, 'g').test(word.simpleDefinition);
     const isInDetails = new RegExp(searchTerm, 'g').test(word.longDefinition);
     return isInName || isInDefinition || isInDetails;
   });
   return matchingWords;
+}
+
+export function highlightSearchTerm(word) {
+  const searchTerm = getSearchTerm();
+  const markedUpWord = cloneObject(word);
+  if (searchTerm) {
+    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>`);
+  }
+  console.log('markedUpWord', markedUpWord);
+  return markedUpWord;
 }