- engindeniz.net - http://www.engindeniz.net/v3.0 -

Php ile Kelime İşaretleme / Highlight

Merhaba
Konu başlıkta görüldüğü gibi PHP ile highlight oluşturma, yani Türkçesiyle
“vurgulamak” diyebiliriz.
Aslında ben işaretleme demeyi daha uygun buluyorum. Yazının devamında da bu kelimeyi kullanacağım :)
Nedir bu işaretleme işlemi?
Google ‘da bir kelime aradığımızda, çıkan sonuçları eğer önbellek/cached ile görüntülerseniz. Aradığınız kelimeler sayfa üzerinde renkli olarak işaretlenmiş olarak gelir. Sayfa içinde de çok rahat aradığınız kelimeleri bulabilirsiniz.Bu özellik kullanıcı için çok kullanışlı bir yöntemdir.

Biz bu özelliği PHP ile yapacağız ve yazı sonunda kendi kullandığım PHP işaretleme fonksiyonunu paylaşmış olacağım.

Bu şekilde google’da gözüktüğü gibi siz de sitenize özel yaptığınız arama scriptinde aranan kelimeleri renkli ekrana yazdırabilirsiniz.

işaretlemeyle ilgili genel bir yanılgı vardır (ki en başında bende bu hataya düşmüştüm) İşaretleme için str_replace kullanımı ilk akla gelir
Yani şöyle

str_replace($kelime,'<span  style="color: #FF0000">'.$kelime.'</span>',$metin);

Bu satırda aranan kelime $kelime değişkeni, $metin değişkeninde bulunduğunda başına ve sonuna span etiketi ekleniyor ve rengi kırmızı #FF0000 atanıyor. Bu sayede aranan kırmızı olarak işaretlenmiş oluyor.
(birden fazla arama için foreach döngüsü ile aynı satır kullanılabilir)

Kod çok kısa ve verimli gözükse de $metin (aranacak metin) içeriğinde html etiketleri olacaksa hatalar doğabilir.
Şöyle ki:

$metin="Koşuyorlar masanın dergi teldeki domates.
Bundan dolayı telefonu. bir Panda, adı pan, Teldeki <span>sokaklarda</span> domates
ışık dağılımı yazın domates telefonu telefonu ama yazın masaya doğru. Nedir nedemek Türkçe Lorem İpsum.";

$kelime = "pan";
echo str_replace($kelime,'<span  style="color: #FF0000">'.$kelime.'</span>',$metin);

yukarıda anlamsız kelimeler içeren bir $metin değişkenimiz var (boşuna okumayın diye belirtmek istedim) :)
bu metin içerisinde “pan” kelimesini arattıracağız.
(pandanın adı pan imiş bunu işaretlemek istiyoruz) :)
Ancak görüldüğü gibi metin içerisinde ayrıca “span” etiketlerimiz var
yani içerisinde ayrıca pan kelimesinin harfleri yer alıyor
Bu durumda str_replace span etiketlerini de bölecek ve html formatını bozacaktır.

Yapılması gereken elbette html etiketleri dışında kalan kelimelerde arama yapıp öyle işaretlemektedir.

Google aracılığı ile tespit ettiğim bazı örneklerde metin bir döngüye alınarak etiketlerin açılış kapanışları tespit edilmiş ve dışında kalanlar dikkate alınmış

Oysa kısa bir regex deseni ile bu kontrolü rahatlıkla sağlayabiliriz

Bu örneği verirken, google’ın kullandığı renkleri de kullanıp her bir aranan kelimeyi buna göre renklendireceğiz


function isaretle($ara,$metin) {
//renkler
$renk[0]=array("#ffff66","black");
$renk[1]=array("#a0ffff","black");
$renk[2]=array("#99ff99","black");
$renk[3]=array("#ff9999","black");
$renk[4]=array("#ff66ff","black");
$renk[5]=array("#880000","white");
$renk[6]=array("#00aa00","white");
$renk[7]=array("#886800","white");
$renk[8]=array("#004699","white");
$renk[9]=array("#990099","white");

$i=0;
$ara=explode( " " , $ara );

foreach($ara as $word){
if($i>=10){ $i=0; }

    $metin = preg_replace("/(?!([^<]+)?>)$word/Usi" , '<b
style="color:'.$renk[$i][1].';background-color:'.$renk[$i][0].'">$0</b>' , $metin );
    $i++;
	}
return $metin;
}

kullanımı

echo isaretle("aranacak kelimeler",$aranacakmetin);

10 ayrı renk var. (google’ın kullandıklarını sıraladım)
10 ayrı kelime için 10 farklı renk kullanılacak 11.’de başa dönecek.
siz isterseniz daha arttırabilirsiniz. hatta silip yazının başındaki gibi sadece kırmızı kullanabilir ya da rastgele bir renk üretebililirsiniz. bu kısım size kalmış.
Şahsen ben rastgele renk üretmeyi uygun bulmuyorum çünkü background rengi ile yazı rengi bir birine yakın olabiliyor bu durumda kelimeler okunamayabiliyor.
Her arama için ayrı renk, kelimeleri rahat bulmayı sağlıyor.

Renkleri atadıktan sonra aranacak kelimeleri aralarında boşluklar bırakarak fonksiyona dâhil ediyoruz.
Burada explode komutuyla array olarak dönüştürüp her biri metinde var olup olmadığı kontrol ettirmek için de foreach ile bir döngüye sokuyoruz.

yukarıda belirttiğim sorunun çözümü regexp deseni burada devreye giriyor

/(?!([^<]+)?>)$word/Usi

bu desen ile html etiketi dışında kalan kelimeler arasında $word (aranan kelimemiz) ‘i tespit ediyoruz, bulursa bunu

<b style="color:'.$renk[$i][1].';background-color:'.$renk[$i][0].'">$0</b>

satırı ile değiştiriyor.
bu satırda görünen $0 ibaresi $word’u temsil etmektedir.
yani aynı kelime ile değiştiriyor ancak başına ve sonuna renklendirilmiş etiketler ekliyor.
bu arada döngü içine her kelimede farklı renk çıkması için $i değişkenini atadık her döngüde bu değişken bir artıyor ve daha önce tanımladığımız renk değişkenlerini çağırmış oluyor.

aslında bu iş javascript ile de yapılıyor
regex belki aynı desen kullanılabilir,henüz deneyemedim.
ilgisini çeken olursa javascript için iki örnek

http://www.nsftools.com/misc/SearchAndHighlight.htm [1]

jquery ile renklendirme

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html [2]

bunu da yeni buldum
Türkçe Lorem İpsum :)
http://www.nedirnedemek.org/araclar/turkce-lorem-ipsum [3]

umarım işinize yarar
sevgilerimle,

Be Sociable, Share!
  • [4]
  • [5]
  • [6]
  • [7]