Arama sonuç sayfasınızda aranan kelimeleri belirginleştirmek

arama sonuç sayfanızda aranan kelimeleri jquery ile belirginleştirmeniz çok kolay.

Demo: aşağıdaki metinde lorem ve dolo kelimeleri belirginleştirelim

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl justo, fringilla ut erat eu, consectetur pulvinar neque. Morbi pellentesque leo vitae risus ultrices congue. Aliquam ultricies gravida ante. Donec id est sed ligula vestibulum aliquam sit amet at sem. Aliquam ullamcorper gravida nisi eget scelerisque. Mauris pharetra eros diam. Nullam lorem purus, convallis quis quam ac, tristique faucibus lectus. Praesent ut augue ac lorem feugiat elementum ut sed arcu. Nam ut semper leo, sit amet lacinia libero. Sed eu mi nisi. Vivamus vulputate, sapien vitae commodo gravida, augue erat malesuada velit, quis ornare justo ex ac lacus. In mattis porttitor metus, vel gravida nulla sagittis id. Morbi a pulvinar lorem, sed vehicula purus.

magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum dui nec tortor pulvinar, ultricies gravida mi finibus. Suspendisse ut viverra magna. Nulla facilisi. Cras sed nunc eu nulla porta interdum. Sed ultrices erat ac sollicitudin fermentum. Proin feugiat magna sit amet mi posuere, vel tempus tellus consequat. Ut nibh diam, porttitor vel diam ac, congue scelerisque purus. Cras at augue nunc. Sed sit amet lorem non arcu tincidunt fermentum et ut lorem. Donec vehicula enim metus, sit amet lacinia ante commodo vel.

Duis massa nunc, iaculis id justo id, blandit molestie lorem. Integer ac ex dignissim, dignissim ex vel, sollicitudin turpis. Phasellus at placerat nisi, bibendum maximus nisi. Vivamus ut est ac odio consequat ullamcorper vitae a magna. Sed vestibulum nisl quis nisl malesuada, et vestibulum velit luctus. Mauris ante justo, feugiat non est ut, volutpat sollicitudin velit. Donec rutrum eros a eros tempus ullamcorper. Donec felis lacus, aliquet non eros ac, convallis scelerisque elit. Aenean iaculis nisi eget sapien vehicula, a blandit nulla pellentesque. Nunc a nibh cursus, sollicitudin ex ut, pretium elit. Nunc placerat nulla tincidunt, sodales odio vehicula, eleifend leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eget dui justo.

Phasellus cursus turpis et augue fermentum consectetur. Curabitur faucibus sapien felis, ac commodo odio tristique molestie. Nam sagittis mi ex, et semper libero posuere nec. Morbi quis elementum lorem. Cras non lacus congue, egestas tellus a, faucibus odio. Pellentesque malesuada sem non nibh volutpat mollis. Donec laoreet ut enim et lacinia. Quisque auctor risus quis ante pretium convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id aliquet est. Integer tincidunt tortor orci, ut placerat turpis vestibulum ultrices. Nunc aliquet hendrerit arcu, non malesuada nibh dictum et.

Bunun için gerekli kod aşağıdadır;


<div class="panel-body box-content ornekpanel" style="background-color:black;color:white">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl justo, fringilla ut erat eu, consectetur pulvinar neque. Morbi pellentesque leo vitae risus ultrices congue. Aliquam ultricies gravida ante. Donec id est sed ligula vestibulum aliquam sit amet at sem. Aliquam ullamcorper gravida nisi eget scelerisque. Mauris pharetra eros diam. Nullam lorem purus, convallis quis quam ac, tristique faucibus lectus. Praesent ut augue ac lorem feugiat elementum ut sed arcu. Nam ut semper leo, sit amet lacinia libero. Sed eu mi nisi. Vivamus vulputate, sapien vitae commodo gravida, augue erat malesuada velit, quis ornare justo ex ac lacus. In mattis porttitor metus, vel gravida nulla sagittis id. Morbi a pulvinar lorem, sed vehicula purus.</p>

<p>magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum dui nec tortor pulvinar, ultricies gravida mi finibus. Suspendisse ut viverra magna. Nulla facilisi. Cras sed nunc eu nulla porta interdum. Sed ultrices erat ac sollicitudin fermentum. Proin feugiat magna sit amet mi posuere, vel tempus tellus consequat. Ut nibh diam, porttitor vel diam ac, congue scelerisque purus. Cras at augue nunc. Sed sit amet lorem non arcu tincidunt fermentum et ut lorem. Donec vehicula enim metus, sit amet lacinia ante commodo vel.</p>

<p>Duis massa nunc, iaculis id justo id, blandit molestie lorem. Integer ac ex dignissim, dignissim ex vel, sollicitudin turpis. Phasellus at placerat nisi, bibendum maximus nisi. Vivamus ut est ac odio consequat ullamcorper vitae a magna. Sed vestibulum nisl quis nisl malesuada, et vestibulum velit luctus. Mauris ante justo, feugiat non est ut, volutpat sollicitudin velit. Donec rutrum eros a eros tempus ullamcorper. Donec felis lacus, aliquet non eros ac, convallis scelerisque elit. Aenean iaculis nisi eget sapien vehicula, a blandit nulla pellentesque. Nunc a nibh cursus, sollicitudin ex ut, pretium elit. Nunc placerat nulla tincidunt, sodales odio vehicula, eleifend leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eget dui justo.</p>

<p>Phasellus cursus turpis et augue fermentum consectetur. Curabitur faucibus sapien felis, ac commodo odio tristique molestie. Nam sagittis mi ex, et semper libero posuere nec. Morbi quis elementum lorem. Cras non lacus congue, egestas tellus a, faucibus odio. Pellentesque malesuada sem non nibh volutpat mollis. Donec laoreet ut enim et lacinia. Quisque auctor risus quis ante pretium convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id aliquet est. Integer tincidunt tortor orci, ut placerat turpis vestibulum ultrices. Nunc aliquet hendrerit arcu, non malesuada nibh dictum et.</p>
</div>

<style type="text/css">.highlight {
font-weight: bold;
background-color:yellow;
color:black;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>
function highlight_words(keywords, element) {
    if(keywords) {
        var textNodes;
       
        var str = keywords.split(","); //virgülle ayrılmış kelimeleri alır 
        $(str).each(function(i,item) { // her bir kelime için döngü oluşur
        var rgxp = new RegExp(item, 'g');
    var repl = '<span class="highlight">' + item+ '</span>'; // belirginleştirici sınıfı span etiketi kullanarak ekleriz 
    $(element).html($(element).html().replace(rgxp, repl)); // aranan kelimeyle yer değiştirme işlemi gerçekleşir 


        });
    }
}
$(document).ready(function(){
highlight_words("lorem,dolo",".ornekpanel");  // belirginleştirici fonksiyonu çağırırız 
});
</script>

.:Happy Coding:..

Makale Tarihi: 02.06.2016 Gücellenme Tarihi: 22.02.2018

Yorum Yaz

Yorumlarınız denetimden geçtikten sonra yayınlanmaktadır...