làm thế nào để làm nổi bật một từ trong một đoạn trong góc 2?

Question

Tôi đã làm điều này trong 1.x góc nhưng tôi muốn biết làm thế nào để làm nổi bật một từ động trong 2..in góc góc iam 1.x sử dụng một từ khóa

 <td><div highlight="var" keywords="somename">  {{paragraph}}</div></td> 

Tôi đã làm html trên bởi sử dụng dưới đây angular-highlight.js.

 angular.module('angular-highlight', []) 
     .directive('highlight', function() 
    { 

    var component = function(scope, element, attrs) { 

    if (!attrs.highlightClass) { 
     attrs.highlightClass = 'angular-highlight'; 
    } 

    var replacer = function(match, item) { 
     return '<span class="'+attrs.highlightClass+'">'+match+'</span>'; 
    } 
    var tokenize = function(keywords) { 
     keywords = keywords.replace(new RegExp(',$','g'), '').split(','); 
     var i; 
     var l = keywords.length; 
     for (i=0;i<l;i++) { 
      keywords[i] = '\\b'+keywords[i].replace(new RegExp('^ | $','g'), '')+'\\b'; 
     } 
     return keywords; 
    } 

    scope.$watch('keywords', function() { 
     //console.log("scope.keywords",scope.keywords); 
     if (!scope.keywords || scope.keywords == '') { 
      element.html(scope.highlight); 
      return false; 
     } 


     var tokenized = tokenize(scope.keywords); 
     var regex  = new RegExp(tokenized.join('|'), 'gmi'); 

     //console.log("regex",regex); 

     // Find the words 
     var html = scope.highlight.replace(regex, replacer); 

     element.html(html); 
    }); 
} 
return { 
    link:   component, 
    replace:  false, 
    scope:   { 
     highlight: '=', 
     keywords: '=' 
    } 
}; 
}); 

Answer 1

Trong trường hợp ai đó quan tâm đến một giải pháp đơn giản (chung), tôi đã đưa ra một chỉ thị (dựa trên công việc của Thierry Templier!).

Chỉ thị này cho phép bạn vượt qua các văn bản để làm việc với, các văn bản tìm kiếm và một lớp học để áp dụng:

import { Directive, ElementRef, Renderer, Input, OnInit } from '@angular/core'; 
import { escapeStringRegexp } from '../helpers/helper'; 

@Directive({ 
    selector: '[appColorSearchedLetters]' 
}) 
export class ColorSearchedLettersDirective implements OnInit { 
    @Input() search: string; 
    @Input() text: string; 
    @Input() classToApply: string; 

    constructor(private el: ElementRef, private renderer: Renderer) { } 

    ngOnInit() { 
    if (typeof this.classToApply === 'undefined') { 
     this.classToApply = ''; 
    } 

    if (typeof this.search === 'undefined') { 
     this.renderer.setElementProperty(this.el.nativeElement, 'innerHTML', this.text); 
     return; 
    } 

    let search = escapeStringRegexp(this.search.toString()); 
    this.renderer.setElementProperty(this.el.nativeElement, 'innerHTML', this.replace(this.text, search)); 
    } 

    replace(txt: string, search: string) { 
    let searchRgx = new RegExp('('+search+')', 'gi'); 

    return txt.replace(searchRgx, `<span class="${this.classToApply}">$1</span>`); 
    } 
} 

Và helper

import { escapeStringRegexp } from '../helpers/helper'; 

chứa:

let matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g; 

export function escapeStringRegexp (str) { 
    if (typeof str !== 'string') { 
    throw new TypeError('Expected a string'); 
    } 

    return str.replace(matchOperatorsRe, '\\$&'); 
}; 

Chức năng này là từ https://www.npmjs.com/package/escape-string-regexp và tín dụng đến Sindresorhus.

Đây là cách tôi sử dụng nó:

<span appColorSearchedLetters [search]="search" [text]="user.name" classToApply="searched"></span> 

Answer 2

tôi sẽ tạo ra một chỉ thị tùy chỉnh cho việc này:

@Directive({ 
    selector: '[highlight]' 
}) 
export class HighlightDirective { 
    @Input() 
    keywords:string; 

    highlightClass: string = 'highlight'; 

    constructor(private elementRef:ElementRef,private renderer:Renderer) { 

    } 

    replacer(match, item) { 
    return `<span class="${this.highlightClass}">${match}</span>`; 
    } 

    tokenize(keywords) { 
    keywords = keywords.replace(new RegExp(',$','g'), '').split(','); 
    return keywords.map((keyword) => { 
     return '\\b'+keyword.replace(new RegExp('^ | $','g'), '')+'\\b'; 
    }); 
    } 

    ngOnChanges() { 
    if (this.keywords) { 
     var tokenized = this.tokenize(this.keywords); 
     var regex = new RegExp(tokenized.join('|'), 'gmi'); 

     var html = this.elementRef.nativeElement.innerHTML.replace(regex, (match, item) => { 
     return this.replacer(match, item); 
     }); 

     this.renderer.setElementProperty(this.elementRef.nativeElement, 'innerHTML', html); 
    } 
    } 
} 

Và sử dụng nó như thế này:

@Component({ 
    selector: 'app' 
    template: ` 
    <p highlight keywords="test,angular2"> 
    this is a test to highlight words with angular2 
    </p> 
    `, 
    styles: [` 
    .highlight { 
     background-color: yellow; 
    } 
    `] 
    directives: [ HighlightDirective ] 
}) 
export class App { 
} 

Theo ViewEncapsulation sử dụng, bạn có thể cần một hack (trong mô phỏng một - mặc định bật) để thêm thuộc tính để có thể xem các kiểu được áp dụng:

replacer(match, item) { 
    return `<span ${encapsulationAttribute} class="${this.highlightClass}">${match}</span>`; 
} 

ngOnChanges() { 
    this.initializeEncapsulationAttribute(); 
    (...) 
} 

initializeEncapsulationAttribute() { 
    if (!this.encapsulationAttribute) { 
    var attributes = this.elementRef.nativeElement.attributes; 
    for (var i = 0; i<attributes.length; i++) { 
     let attr = attributes[i]; 
     if (attr.name.indexOf('_ngcontent') != -1) { 
     this.encapsulationAttribute = attr.name; 
     break; 
     } 
    } 
    } 
} 

Xem thư này: https://plnkr.co/edit/XxB1pFEyUHlZetxtKMUO?p=preview.