Bir web sayfasının bulmak istediğim "Ben basit bir dizeyim" gibi bir dizesi olduğunu varsayalım. JQuery kullanarak bunu nasıl yapabilirim?
Bir web sayfasının bulmak istediğim "Ben basit bir dizeyim" gibi bir dizesi olduğunu varsayalım. JQuery kullanarak bunu nasıl yapabilirim?
Yanıtlar:
jQuery içerir yöntemi vardır. İşte size bir pasaj:
<script type="text/javascript">
$(function() {
var foundin = $('*:contains("I am a simple string")');
});
</script>
Yukarıdaki seçici, hedef dizeyi içeren herhangi bir öğeyi seçer. Foundin, eşleşen herhangi bir öğe içeren bir jQuery nesnesi olacaktır. API bilgilerine bakın: https://api.jquery.com/contains-selector/
'*' Joker karakteriyle dikkat etmeniz gereken bir şey, html'niz de muhtemelen istemediğiniz bir gövde öğesi de dahil olmak üzere tüm öğeleri alacağınızdır. Bu nedenle jQuery ve diğer yerlerdeki örneklerin çoğunda $ ('div: include ("Ben basit bir dizeyim")') kullanılır
Normalde jQuery seçicileri DOM'daki "metin düğümleri" içinde arama yapmaz. Ancak .contents () işlevini kullanırsanız, metin düğümleri dahil edilir, o zaman yalnızca metin düğümlerini filtrelemek için nodeType özelliğini ve metin dizesini aramak için nodeValue özelliğini kullanabilirsiniz.
$ ('*', 'gövde') .andSelf () .contents () .filter (fonksiyonu () { this.nodeType === 3 döndür; }) .filter (fonksiyonu () { // Yalnızca metnin herhangi bir yerinde 'basit dize' bulunduğunda eşleşir return this.nodeValue.indexOf ('basit dize')! = -1; }) .each (fonksiyonu () { // this.nodeValue ile bir şeyler yapın });
.andSelf()
. Gönderen api.jquery.com/andSelf : "jQuery nesneler elemanlarının eşleşti kümesine değişiklikleri izler bir iç yığın korumak DOM kastetmek yöntemlerinden biri çağrıldığında, elementlerin yeni bir dizi depo üzerine itilir ıf.. önceki öğe kümesi de istenir, .andSelf () yardımcı olabilir. " Önceki bir bağlam görmüyorum, ne eksik?
Bu sadece "Ben basit bir dizilim" içeren yaprak elemanlarını seçecektir.
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).css("border","solid 2px red") });
Test etmek için aşağıdakileri adres çubuğuna yapıştırın.
javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;
Sadece "Ben basit bir dize benim" kapmak istiyorsanız . Önce metni böyle bir öğeye sarın.
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).html(
$(this).text().replace(
/"I am a simple string"/
,'<span containsStringImLookingFor="true">"I am a simple string"</span>'
)
)
});
ve sonra bunu yapın.
$('*[containsStringImLookingFor]').css("border","solid 2px red");
Düğümün yalnızca aradığınız metne en yakın olmasını istiyorsanız, bunu kullanabilirsiniz:
$('*:contains("my text"):last');
HTML'niz şöyle görünürse bile bu işe yarar:
<p> blah blah <strong>my <em>text</em></strong></p>
Yukarıdaki seçiciyi kullanmak <strong>
etiketi bulacaktır , çünkü o dizenin tamamını içeren son etiket budur.
<p>my text <b>my text</b></p>
- <b>
etiketin atalarını kaldırmak diğer maçı kaybet
Vurgulamaya bir göz atın (jQuery eklentisi).
Tony Miller'ın cevabına ek olarak, bu beni aradığım şeye% 90 getirdi, ancak hala işe yaramadı. Kodunun .length > 0;
sonuna eklemek senaryomun çalışmasını sağladı.
$(function() {
var foundin = $('*:contains("I am a simple string")').length > 0;
});
foundin += '*';
bu işlev çalışmalıdır. temelde yaprak düğümlerinin ayrı bir listesini alana kadar özyinelemeli bir arama yapar.
function distinctNodes(search, element) {
var d, e, ef;
e = [];
ef = [];
if (element) {
d = $(":contains(\""+ search + "\"):not(script)", element);
}
else {
d = $(":contains(\""+ search + "\"):not(script)");
}
if (d.length == 1) {
e.push(d[0]);
}
else {
d.each(function () {
var i, r = distinctNodes(search, this);
if (r.length === 0) {
e.push(this);
}
else {
for (i = 0; i < r.length; ++i) {
e.push(r[i]);
}
}
});
}
$.each(e, function () {
for (var i = 0; i < ef.length; ++i) {
if (this === ef[i]) return;
}
ef.push(this);
});
return ef;
}