Highlight search terms in results; add cloneObject helper
This commit is contained in:
parent
7011054487
commit
dbff3a122e
|
@ -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, '<');
|
return html.replace(/</g, '<');
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>`;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
Loading…
Reference in New Issue