JQuery Highlight Text Plugin
jQuery.fn.highlight = function(str, className) {
var regex = new RegExp(str, "gi");
return this.each(function() {
$(this).contents().filter(function() {
return this.nodeType == 3 && regex.test(this.nodeValue);
}).replaceWith(function() {
return (this.nodeValue || "").replace(regex, function(match) {
return "<span class=\"" + className + "\">" + match + "</span>";
});
});
});
};
Penggunaan
Seleksi sebuah elemen kemudian terapkan fungsi .highlight("teks", "nama-kelas")
:
$('p').highlight("lorem ipsum", "yellow");
Sumber: A Web Coding Blog - Highlight Words in Text with jQuery
6 Comments:
bang kalau mau kata - kata yang di highligh lebih dari satu gimana..?
@system of blog Diurutkan saja seperti biasa:
$('p')
.highlight("in", "yellow")
.highlight("congu", "red")
.highlight("ero", "green")
.highlight("usus", "blue");
Demo: http://jsfiddle.net/tovic/kfqJu/1/
@Taufik Nurrohman ok deh mantap makasih
ini bagus sih, tapi kalah full stylish \o/
sama iniii
http://jsfiddle.net/codepo8/dgpzM/
kabuuurrr....
@Beben Koben Apa hubungannya? Hehe... :p :p :p
Karena postingan ini akhirnya bisa juga diintegrasikan sama pencarian
Post a Comment
<< Home