Heben Sie den gesuchten Text mit Angular js, jQuery und CSS hervor

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

Frage

Ich benutze dieses jQuery-Plugin zum Suchen von Text: "http://code.google.com/p/jquery-highlight/downloads/list "..

Aber ich bin nicht in der Lage, diesen Code in eckige js zu verpacken , Ich meine zu sagen "Ich kann keine Direktive schreiben, um dieses jQuery-Plug-in aufzurufen"...!!!

Aktualisiert :

Gleicher Beitrag in der Google-Gruppe:

Das ist die Gruppe

War es hilfreich?

Lösung

UPDATE:Dies ist nur ein Beispiel.Sie können nach Ihren Bedürfnissen ändern.

Dafür brauchen Sie keinen regulären Ausdruck-Vergleich.Lassen Sie uns Javascript einfach verwenden split() Funktion

1) Definieren Sie einen Stil für die Hervorhebung.

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

2) Ihr Beispiel-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 aktivieren

            $(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);
        }

Das war's....

Erklärung -: split() bricht den Zielstring entsprechend Ihrem Suchstring auf.Dies ähnelt dem Abrufen kommagetrennter Werte.In diesem Fall verhält sich Ihre Suchzeichenfolge nur wie ein Komma :)

Dann behalte arr[0] so wie es ist.Markieren Sie Ihren Suchbegriff und hängen Sie ihn an arr[0].Anhängen arr[1] zum obigen Ergebnis und so weiter.

Einfach....

Gesuchter Text wie in Sie müssen nur den übereinstimmenden Teil hervorheben, wobei der Rest des Textes so bleibt, wie er ist?

Andere Tipps

Sie können eckular-ui Highlight filter verwenden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top