खोज टेक्स्ट को हाइलाइट करें - कोणीय 2

Question

एक संदेशवाहक उपयोगकर्ता द्वारा दिए गए इनपुट के आधार पर खोज परिणाम प्रदर्शित करता है। परिणाम प्रदर्शित करते समय खोजे गए शब्द को हाइलाइट करने की आवश्यकता है। ये HTML और घटक हैं जिनका उपयोग किया जा रहा है।

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"}] 

यह resultArray इनपुट के रूप में खोज पाठ भेजकर बैकएंड सेवा से टकराने से प्राप्त किए गए है। खोज पाठ के आधार पर, परिणाम प्राप्त किया जाता है। Google खोज के समान, खोजे गए टेक्स्ट को हाइलाइट करने की आवश्यकता है। अगर मैं शब्द "सदस्य", शब्द "सदस्य" की घटना पर प्रकाश डाला जाता है के लिए खोज स्क्रीनशॉट

प्राप्त करें। कोणीय 2 का उपयोग करके इसे कैसे प्राप्त किया जाए। कृपया इस पर एक विचार सुझाएं।

Answer 1

आप पाइप बनाने और उस पाइप को सारांशngfor के अंदर सरणी का हिस्सा लागू करके ऐसा कर सकते हैं। यहाँ 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>"); 
    } 
} 

और फिर मार्कअप में इस तरह एक स्ट्रिंग पर इसे लागू:

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

बदलें शब्द आप हाइलाइट करना चाहते के साथ 'खोज'।

आशा है कि इससे मदद मिलेगी।

Answer 2

चयनित जवाब निम्न समस्याओं है:

1. यह अपरिभाषित वापस आ जाएगी अगर वहाँ खोज स्ट्रिंग
2. में उपलब्ध कराई गई कुछ भी नहीं है खोज केस संवेदी होना चाहिए लेकिन यह है कि मूल स्ट्रिंग मामले जगह नहीं होनी चाहिए।

मैं निम्नलिखित कोड सुझाव है कि बजाय

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

कमल के जवाब पर विस्तार करने के लिए,

बदलने विधि में आने से मूल्य, एक नंबर, शायद स्ट्रिंग String(value) करने के लिए एक डाली हो सकता होगा करने के लिए सुरक्षित बात हो।

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

<mark> टैग स्टाइल करने में आंतरिक HTML पद्धति में एक कठिनाई है। एक और तरीका यह है कि इसे एक घटक में रखना है, जिससे स्टाइल में अधिक विकल्प मिल सकते हैं।

पर प्रकाश डाला-text.component.html

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

पर प्रकाश डाला-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); 
      } 
     } 
    } 
} 

पर प्रकाश डाला-text.component.css

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

प्रयोग

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