Mettez en surbrillance le texte recherché à l'aide d'Angular js, jQuery et Css

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

Question

J'utilise ce plugin jquery pour rechercher du texte :"http://code.google.com/p/jquery-highlight/downloads/list "..

Mais je ne suis pas en mesure d'envelopper ce code dans Angular JS, je veux dire "Je ne suis pas en mesure d'écrire une directive pour appeler ce plug-en jQuery" ... !!!

Mis à jour :

Même message dans le groupe Google :

C'est le groupe

Était-ce utile?

La solution

MISE À JOUR:C'est juste un exemple.Vous pouvez modifier selon vos besoins.

Vous n'avez pas besoin de comparaison RegExp pour cela.Faisons un usage simple du javascript split() fonction

1) Définissez un style de mise en évidence.

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

2) Votre exemple 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);
        }

C'est ça....

Explication -: split() brisera la targetString en fonction de votre searchString.Ceci est similaire à la façon dont nous récupérons les valeurs séparées par des virgules.La seule chose est que dans ce cas, votre chaîne de recherche agit comme une virgule :)

Alors garde arr[0] tel quel.Mettez en surbrillance votre chaîne de recherche et ajoutez-la à arr[0].Ajouter arr[1] au résultat ci-dessus et ainsi de suite.

Simple....

Texte recherché comme dans vous devez uniquement mettre en surbrillance la partie correspondante en conservant le reste du texte tel quel ?

Autres conseils

Vous pouvez utiliser Might angular-UI Mighter filtre.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top