diff --git a/src/components/Article.vue b/src/components/Article.vue index 5a391fdf2108370abba94a1948c499ee7893030f..fc24be1ab341077e896cad3b5101ab2ab593abf7 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -92,6 +92,9 @@ export default { return {bm: 'nob', nn: 'nno'}[this.dictionary] } }, + fulltext: function() { + return this.$store.state.fulltext + }, collapsable: function() { if (this.$parent.$options.name != 'SearchResults') { this.is_collapsed = false @@ -228,10 +231,28 @@ export default { definitionTexts = [] } - let definitions = definitionTexts.join("\u00A0•\u00A0") - return definitions + let snippet = definitionTexts.join("\u00A0•\u00A0") + return snippet }, + highlight_hits: function(text, type) { + if (text != "" && this.fulltext) { + let regex_split = new RegExp("([a-zà -ÿ]?"+this.fulltext+"[a-zà -ÿ]?)", "i") + let regex_include = new RegExp("^"+this.fulltext+"$", "i") + if (regex_split.test(text)) { + let components = text.split(regex_split) + return components.map(item => { + if (regex_include.test(item)) { + return {text: item, type: "highlighted"+(type?' '+type:'')} + } + else { + return {text: item, type} + } + }) + } + } + return [{text, type}] + }, toggle_collapse: function() { this.$plausible.trackEvent('toggle collapse', {props: {from: this.collapsed, to: !this.collapsed}}) this.collapsed = !this.collapsed diff --git a/src/components/Header.vue b/src/components/Header.vue index 571e0e280b98e81bdd662b9dcebf1f84d19b2865..b87310ebacc69a7f5d671fb6371f64671bbd8792 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -59,7 +59,7 @@ <span v-if="!lemma_groups[1] && $parent.collapsed && $parent.snippet && $parent.has_content" class="definition_snippet"> - {{$parent.snippet}} + <span v-for="(subitem, index) in $parent.highlight_hits($parent.snippet)" :key="index" :class="subitem.type">{{subitem.text}}</span> </span> </div>