Mark.js ile Herhangi Bir Web Sayfasına Arama Anahtar Kelime Vurgulaması Ekleme

Çoğu tarayıcıda CTRL + F işlevselliği Kullanıcının aradığı şeyi aramak ve bulmak için. Ancak bu özellik mobil cihazlarda desteklenmiyor ve dinamik metin kullanarak iyi çalışmıyor.

Neyse ki, var Mark.js, ekleyen ücretsiz bir JavaScript eklentisi Arama özelliğini vurgulayın kolaylıkla herhangi bir sayfaya.

Varsayılan olarak, bir vanilya JS eklentisi ama aynı zamanda koşabilir jQuery üstünde. Tamamen açık kaynak kodlu bir proje, bu yüzden reklamı başka bir web sitesinde kullanmakta özgürsünüz..

Herhangi bir tarayıcı arama özelliğine çok benziyor, ancak ekstra özelliklerle birlikte geliyor. Ekleyebilirsin kendi özel filtreleriniz ve kelimelere göre arama yapın. düzenli ifadeler, belirli eş anlamlılar, ve hatta içinde dinamik sayfa öğeleri iframe'ler gibi.

Başlamak için, sadece Mark.js dosyasını indirin GitHub çıkışlı veya dosyayı barındırın CDN aracılığıyla zaman kazanma.

Bu işlevi çalıştırmalısınız bir giriş alanına bağlı sayfada. Bu şekilde kullanıcılar arama terimlerini girebilir ve hemen geri bildirim almak vurgulanan metin yoluyla.

İşte bir örnek pasajı demo sayfasından:

 $ (". bağlam"). mark (anahtar kelime [, seçenekler]); 

.bağlam Sınıf, fonksiyonun nerede olması gerektiğini hedefler terimleri ara. Kullanabilirsiniz varsayılan HTML eleman tüm sayfayı aramaya çalışıyorsanız veya çoklu elemanlar farklı sekmeli widget'lar veya iframe'ler gibi.

Sonra, içinde işaret() işlevini yerine getir anahtar kelimeyi geç, seçenekleri ile birlikte (isterseniz).

Kullanıcıların bir anahtar kelime girmesine izin verirseniz, işlevi otomatik güncelle Her tuşa basıldıktan sonra yeni bir anahtar kelimeyle. Bu olayı hedefleyen belirli bir işlev bile var.

Mark.js tüm büyük tarayıcılarla çalışır, Chrome, Firefox, Opera (v12 +) ve Internet Explorer (9+) dahil. Dokümanları takip edip en yeni dosyaları kullanıyorsanız, kurulumu çok kolaydır.

Ama görmek istersen Mark.js çalışırken göz atmak altında keman Lorem Ipsum'un birkaç paragrafını aramak için çok basit bir jQuery demosu kullanmak.