Markieren Sie den Suchtext - eckig 2

Question

Ein Messenger zeigt die Suchergebnisse basierend auf der Eingabe durch den Benutzer an. Sie müssen das gesuchte Wort markieren und das Ergebnis anzeigen. Dies sind die HTML und Komponente, die verwendet wurde.

Component.html

<div *ngFor = "let result of resultArray"> 
<div>Id : result.id </div> 
<div>Summary : result.summary </div> 
<div> Link : result.link </div> 
</div> 

Component.ts

resultArray : any = [{"id":"1","summary":"These are the results for the searched text","link":"http://www.example.com"}] 

Dieser resultArray geholt aus dem Backend-Service schlagen, indem Sie den Suchtext als Eingabe zu senden. Basierend auf dem Suchtext wird das Ergebnis abgerufen. Müssen Sie den gesuchten Text markieren, ähnlich wie Google-Suche. Bitte finden Sie den Screenshot,

Wenn ich für das Wort „Element“ zu suchen, das Auftreten des Wortes „Mitglied“ hervorgehoben wird. Wie erreichen Sie das gleiche mit eckigen 2. Bitte schlagen Sie eine Idee dazu vor.

Answer 1

Sie können das tun, indem Sie eine Pipe erstellen und diese Pipe auf die Zusammenfassung Teil des Arrays innerhalb ngfor anwenden. Hier ist der Code für Pipe:

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'highlight' 
}) 

export class HighlightSearch implements PipeTransform { 

    transform(value: any, args: any): any { 
     var re = new RegExp(args, 'gi'); //'gi' for case insensitive and can use 'g' if you want the search to be case sensitive. 
     return value.replace(re, "<mark>" + args + "</mark>"); 
    } 
} 

und dann in Markup gilt es auf einer Zeichenfolge wie folgt:

<div innerHTML="{{ str | highlight : 'search'}}"></div> 

Ersetzen ‚Suche‘ mit dem Wort, das Sie hervorheben möchten.

Hoffe, das wird helfen.

Answer 2

Die gewählte Antwort hat die folgenden Probleme:

1. Es wird undefined zurück, wenn es nichts in der Suchtext
2. Die Suche Fall sein sollte unempfindlich vorgesehen ist, aber das sollte die ursprüngliche Zeichenfolge Fall nicht ersetzen.

würde ich den folgenden Code vorschlagen statt

transform(value: string, args: string): any { 
    if (args && value) { 
     let startIndex = value.toLowerCase().indexOf(args.toLowerCase()); 
     if (startIndex != -1) { 
      let endLength = args.length; 
      let matchingString = value.substr(startIndex, endLength); 
      return value.replace(matchingString, "<mark>" + matchingString + "</mark>"); 
     } 

    } 
    return value; 
} 

Answer 3

auf Kamal Antwort zu erweitern,

Der Wert in der Methode verwandeln kommen, eine Zahl sein könnte, vielleicht eine Besetzung zu bespannen String(value) würde sicher sein, etwas zu tun.

transform(value: string, args: string): any { 
    if (args && value) { 
     value = String(value); // make sure its a string 
     let startIndex = value.toLowerCase().indexOf(args.toLowerCase()); 
     if (startIndex != -1) { 
      let endLength = args.length; 
      let matchingString = value.substr(startIndex, endLength); 
      return value.replace(matchingString, "<mark>" + matchingString + "</mark>"); 
     } 

    } 
    return value; 
} 

Answer 4

Eine Schwierigkeit der Innerhtml-Methode ist es, die <mark> Tag in Styling hat. Eine andere Methode besteht darin, dies in eine Komponente einzufügen, wodurch viel mehr Optionen beim Stylen möglich sind.

hervorgehoben-text.component.html

<mark *ngIf="matched">{{matched}}</mark>{{unmatched}} 

hervorgehoben-text.component.ts

import { Component, Input, OnChanges, OnInit } from "@angular/core"; 

@Component({ 
    selector: "highlighted-text", 
    templateUrl: "./highlighted-text.component.html", 
    styleUrls: ["./highlighted-text.component.css"] 
}) 
export class HighlightedTextComponent implements OnChanges { 
    @Input() needle: String; 
    @Input() haystack: String; 
    public matched; 
    public unmatched; 

    ngOnChanges(changes) { 
     this.match(); 
    } 

    match() { 
     this.matched = undefined; 
     this.unmatched = this.haystack; 
     if (this.needle && this.haystack) { 
      const needle = String(this.needle); 
      const haystack = String(this.haystack); 
      const startIndex = haystack.toLowerCase().indexOf(needle.toLowerCase()); 
      if (startIndex !== -1) { 
       const endLength = needle.length; 
       this.matched = haystack.substr(startIndex, endLength); 
       this.unmatched = haystack.substr(needle.length); 
      } 
     } 
    } 
} 

hervorgehoben-text.component.css

mark { 
    display: inline; 
    margin: 0; 
    padding: 0;  
    font-weight: 600; 
} 

Nutzungs

<highlighted-text [needle]=searchInput [haystack]=value></highlighted-text>