Evidenziazione dei termini di ricerca abbinati in angolare e CSS

Oltre ad espandere i nodi dell’albero per mostrare le etichette dei nodi corrispondenti, possiamo anche evidenziare i termini di ricerca corrispondenti impostando il loro colore di sfondo. Potrebbe sembrare un compito arduo, ma, in Angular, è relativamente facile.

Probabilmente ci sono diversi modi per farlo, ma una soluzione è creare una pipe che accetti il ​​testo cercato come argomento e restituisca un SPAN elemento basato sul risultato di a espressione regolare o RegEx. Ecco il codice per una tale pipe:

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'highlight',
})
export class HighlightPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(text: string, search: string): string {
    if (!search) {
      return text;
    }

    const regex = 
      new RegExp(
        this.sanitizer.sanitize(SecurityContext.HTML, search), 'gi'
      );
    const match = text.match(regex);

    if (!match) {
      return text;
    }

    return text.replace(regex, `<span class="highlight">${match[0]}</span>`);
  }
}

Leggere: Ottimizzazione dei modelli RegEx

Se guardi da vicino il codice sopra, noterai che ci sono tre dichiarazioni di ritorno. Questo perché la pipa non sa mai cosa otterrà:

1. Potrebbe non esserci affatto una stringa di ricerca. In tal caso, restituiamo il testo completo e inalterato.
2. Il termine di ricerca potrebbe non corrispondere a nessuna parte del testo. Ancora una volta, restituiamo il testo originale.
3. Se la RegEx colpisce, avvolgiamo la parte abbinata all’interno SPAN tag e restituirlo.

Un’altra curiosità osservata nel trasformare() il metodo è il disinfettare() metodo. La sanificazione si riferisce alla modifica dell’input non attendibile in modo che sia reso sicuro l’inserimento nel DOM. Il metodo di sanificazione è esposto dal Disinfettante Dom class, motivo per cui viene iniettato tramite il costruttore.

Il tipo di sanificazione eseguita dipende dal contesto, perché un valore innocuo in CSS potrebbe essere potenzialmente pericoloso in un URL. Per tale motivo, il primo argomento del disinfettare() il metodo è un Contesto di sicurezza enum. Dal momento che stiamo generando markup HTML, il contesto corretto è SecurityContext.HTML.

Il Evidenzia Tubo restituisce una stringa, quindi non è sufficiente filtrare il nome.nodo attraverso il tubo. Ciò visualizzerà il SPAN markup come testo! Il modo per aggirare il problema è assegnare il valore convogliato a un elemento nidificato innerHTML proprietà. Non vogliamo modificare le caselle di controllo del tappetino innerHTML perché questo lo sostituirà con l’output del tubo di evidenziazione. Possiamo invece aggiungere a SPAN elemento che conterrà l’evidenziazione nidificata SPAN:

<mat-checkbox 
  class="checklist-leaf-node" 
  (change)="itemToggle($event.checked,node)" 
  [checked]="node.selected"
>
<span [innerHTML]="node.name | highlight: searchString"></span>
</mat-checkbox>

L’unica cosa che resta da fare ora è aggiungere il evidenziare regola di classe al stili.css file:

.highlight {
  background-color: rgba(255, 255, 0, 0.5);
  font-weight: bold;
}

Ciò darà al testo abbinato quel familiare evidenziatore giallo che tutti ricordiamo a scuola:

C’è una demo del codice di oggi su stackblitz.

Conclusione

Nel tutorial sullo sviluppo Web di Angular di oggi, abbiamo imparato come far risaltare i termini di ricerca corrispondenti espandendo quei nodi ed evidenziando il testo del nodo. C’è voluto un po’ di ingegno, ma dove c’è una volontà, c’è sempre un modo!

Per saperne di più JavaScript e tutorial di sviluppo web angolare e guide alla programmazione.