web-dev-qa-db-ja.com

検索テキストを強調表示します-angular 2

メッセンジャーは、ユーザーからの入力に基づいて検索結果を表示します。結果を表示しながら、検索されたWordを強調表示する必要があります。これらは、使用されている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検索と同様に、検索されたテキストを強調表示する必要があります。スクリーンショットを見つけてください、

enter image description here

「メンバー」という単語を検索すると、「メンバー」という単語の出現箇所が強調表示されます。 angular 2.を使用して同じことを達成する方法。これについてのアイデアを提案してください。

javascriptangularhtml5typescript
20
regina

これを行うには、パイプを作成し、そのパイプをngfor内の配列のsummary部分に適用します。 Pipeのコードは次のとおりです。

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

@Pipe({
    name: 'highlight'
})

export class HighlightSearch implements PipeTransform {

    transform(value: any, args: any): any {
        if (!args) {return value;}
        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>

「検索」を強調表示する単語に置き換えます。

これが役立つことを願っています。

38
Fahad Nisar

選択した回答には次の問題があります。

  1. 検索文字列に何も指定されていない場合、undefinedを返します
  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;
}
10
Kamal Saad

InnerHTMLメソッドの難点の1つは、<mark> 鬼ごっこ。別の方法は、これをコンポーネントに配置して、スタイリングのオプションを大幅に増やすことです。

highlighted-text.component.html

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

highlighted-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);
            }
        }
    }
}

highlighted-text.component.css

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

使用法

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

文字列に複数の単語がある場合は、配列を受け入れるパイプを使用し、結果の各単語を強調表示します。

複数の検索語に対して次のパイプを使用できます。

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

@Pipe({
    name: 'highlight'
})

export class HighlightText implements PipeTransform {

    transform(value: any, args: any): any {
        if (!args) {return value;}
        for(const text of args) {
            var reText = new RegExp(text, 'gi');
            value = value.replace(reText, "<mark>" + text + "</mark>");
            //for your custom css
            // value = value.replace(reText, "<span class='highlight-search-text'>" + text + "</span>"); 


        }
        return value;
    }
}

ストリングを分割して、ストリングの配列を生成します。

var searchTerms = searchKey.split(' ');

使用法：

<div [innetHTML]="result | highlight:searchTerms"></div>

カスタムクラスを使用する場合：

.highlight-search-text {
  color: black;
  font-weight: 600;
}

ではごきげんよう！

0
Rahul Dudhane

カマルの答えを拡大するには、

変換メソッドに入力される値は数値である可能性があり、おそらく文字列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;
}
0
Mingster