Highlight search terms in results; add cloneObject helper

This commit is contained in:
Robbie Antenesse 2019-05-03 12:29:53 -06:00
parent 7011054487
commit dbff3a122e
4 changed files with 44 additions and 18 deletions

View File

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

View File

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

View File

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

View File

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