From 6e486df4cac454bdd69d9954220df629fd4aa254 Mon Sep 17 00:00:00 2001 From: konolak Date: Tue, 31 Dec 2024 17:21:03 +0200 Subject: [PATCH 1/2] fix highlight pipe bug and change it to bypass changing accented characters in search results --- src/app/portal/pipes/highlight.pipe.ts | 86 +++++++++++++------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/src/app/portal/pipes/highlight.pipe.ts b/src/app/portal/pipes/highlight.pipe.ts index 966fdd849..6135a97db 100644 --- a/src/app/portal/pipes/highlight.pipe.ts +++ b/src/app/portal/pipes/highlight.pipe.ts @@ -13,10 +13,14 @@ import { DomSanitizer } from '@angular/platform-browser'; standalone: true, }) export class HighlightSearchPipe implements PipeTransform { + constructor(private sanitizer: DomSanitizer) {} transform(value: any, keywords: any): any { // Convert value to string to highlight numbers also + console.log(value, keywords); + console.log(keywords); + console.log('-') value = value ? value.toString() : value; if (!value || !keywords) { @@ -25,7 +29,7 @@ export class HighlightSearchPipe implements PipeTransform { const LETTER_EXPRESSION = /^\p{L}$/u; const isLetter = (character) => { - return character && LETTER_EXPRESSION.test(character); + return character && (LETTER_EXPRESSION.test(character) || !isNaN(character) || character === '.' || character === ','); }; // Replace coded umlauts @@ -39,57 +43,53 @@ export class HighlightSearchPipe implements PipeTransform { .filter(Boolean) .map((item) => item.replace(/,|;/g, '')); - // Map value keys and loop through args, replace with tags + // Loop through input values and compare with keywords. Highlight keyword in tags if input contains a keyword. const match = valueArr.map((e) => { - for (let i = 0; i < keywordsArr.length; i++) { - //Neutralising the effect of accents - const temp_e = e.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); - let aKeyword = keywordsArr[i] - .normalize('NFD') - .replace(/[\u0300-\u036f]/g, ''); - - // Replace first and last special characters from the string + for (let i = 0; i < keywordsArr.length; i+=1) { + let aKeyword = keywordsArr[i]; + + // Crop first and last special characters from the string isLetter(aKeyword.charAt(0)) ? null : aKeyword = aKeyword.substring(1); - isLetter(aKeyword.charAt(aKeyword.length -1)) ? null : aKeyword = aKeyword.slice(0, -1); - - if ( - aKeyword.length > 0 && - temp_e.toLowerCase().includes(aKeyword.toLowerCase()) - ) { - // 'gi' stands for case insensitive, use 'g' if needed for case sensitive - const src = new RegExp(keywordsArr[i], 'gi'); - const found = e.match(src); - const src_accent = new RegExp(aKeyword, 'gi'); - const found_accent = temp_e.match(src_accent); - - if (found) { - e = e.replace(src, '' + found[0] + ''); - if (aKeyword.length == temp_e.length) { - keywordsArr.splice(i, 1); - i--; - } - break; - } else if (found_accent) { - e = temp_e.replace( - src_accent, - '' + found_accent[0] + '' - ); - if (aKeyword.length == temp_e.length) { - keywordsArr.splice(i, 1); - i--; - } - break; - } else { - return e; - } + isLetter(aKeyword.charAt(aKeyword.length - 1)) ? null : aKeyword = aKeyword.slice(0, -1); + + // Normalization used to handle accented characters + let normalizedWord = aKeyword.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase(); + let normalizedInput = e.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase(); + + if (aKeyword.length > 0 && normalizedInput.includes(normalizedWord)) { + return (HighlightWords(e, aKeyword, '')); } } return e; }); + // Recursive highlight function. + function HighlightWords(input: string, word: string, processedHighlight: string) { + let normalizedWord = word.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + let stillToProcessInput = input.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + const firstOccurrence = stillToProcessInput.toLowerCase().indexOf(normalizedWord.toLowerCase()); + + if (firstOccurrence !== -1) { + let sliceIndex = firstOccurrence + normalizedWord.length; + processedHighlight += input.slice(0, firstOccurrence); + processedHighlight += '' + input.slice(firstOccurrence, sliceIndex) + ''; + + // Process input as it is, normalization used only to interpret accented characters like search does + stillToProcessInput = input.slice(sliceIndex, input.length); + if (stillToProcessInput.length > 0) { + return HighlightWords(stillToProcessInput, word, processedHighlight) + } else { + return processedHighlight; + } + } else { + return processedHighlight + stillToProcessInput; + } + } + const result = match.join(' '); // Needs to be bypassed because of dynamic value return this.sanitizer.bypassSecurityTrustHtml(result); + } -} +} \ No newline at end of file From 827cf839bd68c50961ef983a524eda3f6c3d79df Mon Sep 17 00:00:00 2001 From: konolak Date: Tue, 31 Dec 2024 17:27:07 +0200 Subject: [PATCH 2/2] remove console logs --- src/app/portal/pipes/highlight.pipe.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/portal/pipes/highlight.pipe.ts b/src/app/portal/pipes/highlight.pipe.ts index 6135a97db..b2ee1e4a8 100644 --- a/src/app/portal/pipes/highlight.pipe.ts +++ b/src/app/portal/pipes/highlight.pipe.ts @@ -18,9 +18,6 @@ export class HighlightSearchPipe implements PipeTransform { transform(value: any, keywords: any): any { // Convert value to string to highlight numbers also - console.log(value, keywords); - console.log(keywords); - console.log('-') value = value ? value.toString() : value; if (!value || !keywords) {