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) {
var tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*';

View File

@ -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();
}

View File

@ -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>`;

View File

@ -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,9 +99,13 @@ 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);
@ -109,3 +113,15 @@ export function getMatchingSearchWords() {
});
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;
}