高ライト角JS、jQuery、CSSを使用して検索されたテキスト

StackOverflow https://stackoverflow.com//questions/11685473

質問

このjQueryプラグインを使用してテキストを検索するためのIM： " http：// code.google.com / p / jquery-highlight / downloads / list "..

しかしimは角度JSでこのコードを包むことができません、 「このjQueryプラグインを呼び出すための指令を書くことができない」... !!!

更新：

Googleグループの同じ投稿：

これはグループ

役に立ちましたか？

解決

更新：これはほんの一例です。あなたはあなたのニーズに従って変更することができます。

それについての正規表現の比較は必要ありません。 JavaScriptのsplit()関数を簡単に使用できます

1）強調表示のためのスタイルを定義します。

.srchslctn{
    background-color: yellowgreen;
    color: red;
}
.

2）あなたのサンプルHTML 

<body>
    <div>
        <div id="serach-Paragraph">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        </div>
        <input type="button" id="h" value="Highlight"/>
        <div id="target"></div>
    </div>
</body>
.

3）JavaScript 

            $(document).ready(function(){
            $("#h").on('click',function(){
                highlight(); 
            });
        });

        function highlight(){
            $("#target").empty();
            var mainString = $("#serach-Paragraph").html();
            var searchString = "ipsum";
            var arr = mainString.split(searchString);
            var len = arr.length;
            var finalString="";
            for(var i=0;i<arr.length;i++){

                finalString+=arr[i];

                if(i<len-1){
                    finalString+='<span class="srchslctn">'+searchString+'</span>';
                }
            }
            $("#target").html(finalString);
        }
.

それは......

説明 - ：split()は、検索文字列に従ってターゲット文字列を破ります。これは、コンマ区切り値の検索方法と似ています。この場合のみ検索文字列はコンマのように機能します:)

そのままarr[0]を保持します。 検索文字列を強調表示し、それをarr[0]に追加します。 上記の結果などにarr[1]を追加してください。

Simple ....

テキストを検索したテキストは、テキストの残りの部分を維持することだけを強調する必要がありますか？

他のヒント

angular-uiハイライトフィルタを使用できます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top