JQuery kullanarak metin dizesi bulmak?


241

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:


327

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


12
@Tony, sadece tüm paragraf, div vb. Değil, sadece eşleşen metni nasıl değiştirebilirim?
Keith Donegan

12
Bunun büyük / küçük harfe duyarlı olduğunu belirtmek gerekir. "Me" adlı bir kullanıcı bunu jQuery dokümanlar sayfasına yazdı: $ .expr [':']. İcontains = function (obj, index, meta, stack) {return (obj.textContent || obj.innerText || jQuery ( obj) .text () || '') .toLowerCase (). indexOf (meta [3] .toLowerCase ())> = 0; }; Örnek: $ ("div: icontains ('John')"). Css ("metin süsleme", "alt çizgi");
Brandon Bloom

bu json için çalışıyor mu? Bir json değerindeki bazı metinleri filtrelemek istersem ne olur?
Chamilyan

5
Metin düğümü satır sonu varsa, bu çalışmaz. "Ben basit bir \ n dizgesiyim". Satır kesilmesinin oluşturulmayacağını, dolayısıyla kullanıcının sorunun nerede olduğunu bile bilmeyeceğini unutmayın. Tüm bu çözümlerin bu sorunu var. Bkz. Jsfiddle.net/qPeAx
jesper

9
-1, çalışmıyor. Ağaçtaki tüm üst düğümleri döndürür, yalnızca en düşük olanı istersiniz.
TMS

51

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
        });

8
Açıklığa kavuşturmak için, Tony'nin belirttiği gibi, metin düğümlerinde arama yapmak için ": içerir ()" seçicisini kullanabilirsiniz, ancak jQuery sonuçlarda tek tek metin düğümlerini döndürmez (yalnızca bir öğe listesi). Ancak .contents () öğesini kullandığınızda, jQuery hem öğeleri hem de metin düğümlerini döndürür. Daha fazla bilgi için: docs.jquery.com/Traversing/contents
BarelyFitz

5
Neden kullandığınızdan şaşkınım .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?
Alan H.

1
Upvoted! Kabul edilen cevap olmalı, çünkü çoğu senaryoda ortak ihtiyaç olduğunu düşündüğüm tüm ana düğümleri filtreliyor.
LucaM

29

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");

3
Burada .filter () işlevi .each () işlevinden daha yararlı olacaktır. Aslında, bunu tek bir seçiciye koyabilirsiniz: "*: içerir ('blah'): boş"
nickf

2
#nickf -: boş metin içeren bir metin düğümü seçmez. Metin düğümü "Ben basit bir dizeyim" içeriyorsa, bu nedenle hariç tutulur. docs.jquery.com/Selectors/empty
Slim

2
Burada biraz geç kaldığımı biliyorum, ancak bu dize en üst düzeyde var herhangi bir metin bloklarını görmezden gelmeyecek ama içinde çocuklar var mı? ör .: <blockquote> Ben basit bir dizilim <span style = "font-weight: bold;"> KENARDA YAŞAM </span> </blockquote>
Ken Bellows

Sadece "includeStringImLookingFor" geçerli bir HTML Özniteliği olmadığını belirtmek istiyorum. Lütfen HTML 5 "data-includeStringImLookingFor" için kullanın. 5'ten önceki HTML Sürümünün özel Özellikler eklemesinin bir yolu yoktur ...
Snickbrack

17

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.


1
Bu işe yaramıyor gibi görünüyor. Bu sayfada, örneğin, *: içerir ("the"): son yalnızca 1 öğe döndürür.
bzlm

4
@bzlm: pek çok tekrar bulmak istediğini belirtmedi.
nickf

2
Aha. Birden fazla kez çalışmasını sağlamanın bir yolu var mı? Bence özyinelemeli düğüm tipi kontrol vb.
İçerenlerden

1
tüm düğümleri almayı düşünebildiğim tek yol, hatta tüm atalar, tüm ebeveynleri kaldırarak, sonuçta döngü yapmak değil, sorunlarınız olabilir, örneğin: <p>my text <b>my text</b></p>- <b>etiketin atalarını kaldırmak diğer maçı kaybet
nickf


7

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;
 });

bulunan dize yeni bir kelime eklemek nasıl?, bu bulunan iş üzerine bir asterik eklemek istiyorum.
userAZLogicApps

@SaMolPP foundin += '*';
Pixelomo

2

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;
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.