Znajdź ciąg tekstowy za pomocą jQuery?

Powiedzmy, że strona internetowa ma ciąg taki jak „Jestem prostym ciągiem”, który chcę znaleźć. Jak mam to zrobić za pomocą JQuery?

jQuery ma metodę zawiera. Oto fragment dla Ciebie:

<script type="text/javascript">
$(function() {
    var foundin = $('*:contains("I am a simple string")');
});
</script>

Selektor powyżej wybiera dowolny element zawierający ciąg docelowy. Foundin będzie obiektem jQuery zawierającym dowolny dopasowany element. Zobacz informacje API na: https://api.jquery.com/contains-selector/

Jedną rzeczą, na którą należy zwrócić uwagę za pomocą symbolu wieloznacznego „*”, jest to, że otrzymasz wszystkie elementy, w tym HTML i elementy treści, których prawdopodobnie nie chcesz. Dlatego większość przykładów w jQuery i innych miejscach używa $ („div: zawiera („ Jestem prosty ciąg znaków ”)”)

Zazwyczaj selektory jQuery nie wyszukują w „węzłach tekstowych” w DOM. Jeśli jednak użyjesz funkcji .contents (), zostaną uwzględnione węzły tekstowe, możesz użyć właściwości nodeType do filtrowania tylko węzłów tekstowych, a właściwości nodeValue do przeszukania ciągu tekstowego.

    $ („*”, „body”)
        .andSelf ()
        .zawartość()
        .filter (function () {
            return this.nodeType === 3;
        })
        .filter (function () {
            // Dopasuj tylko wtedy, gdy zawiera „prosty ciąg” w dowolnym miejscu tekstu
            zwraca this.nodeValue.indexOf ('prosty ciąg')! = -1;
        })
        .each (function () {
            // Zrób coś z this.nodeValue
        });

Spowoduje to wybranie tylko elementów liścia, które zawierają „Jestem prostym ciągiem”.

$('*:contains("I am a simple string")').each(function(){
     if($(this).children().length < 1) 
          $(this).css("border","solid 2px red") });

Wklej następujące elementy w pasku adresu, aby go przetestować.

javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;

Jeśli chcesz złapać tylko „Jestem prostym ciągiem” . Najpierw zawiń tekst w takim elemencie.

$('*: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>' 
               )  
           ) 
});

a następnie zrób to.

$('*[containsStringImLookingFor]').css("border","solid 2px red");

Jeśli chcesz, aby węzeł znajdował się najbliżej szukanego tekstu, możesz użyć tego:

$('*:contains("my text"):last');

Działa to nawet, jeśli Twój HTML wygląda następująco:

<p> blah blah <strong>my <em>text</em></strong></p>

Użycie powyższego selektora spowoduje znalezienie <strong>znacznika, ponieważ jest to ostatni znacznik, który zawiera cały ciąg.

Spójrz na wyróżnienie (wtyczka jQuery).

Po prostu dodałem do odpowiedzi Tony'ego Millera, ponieważ dzięki temu uzyskałem 90% w stosunku do tego, czego szukałem, ale nadal nie działało. Dodanie .length > 0;na końcu jego kodu uruchomiło mój skrypt.

 $(function() {
    var foundin = $('*:contains("I am a simple string")').length > 0;
 });

ta funkcja powinna działać. w zasadzie dokonuje rekurencyjnego wyszukiwania, dopóki nie otrzymamy wyraźnej listy węzłów liści.

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