Найти текстовую строку с помощью jQuery?

Скажите, что веб-страница имеет строку, такую ​​как "Я простая строка", которую я хочу найти. Как мне это сделать с помощью JQuery?

Ответ 1

JQuery имеет метод содержит. Вот фрагмент кода для вас:

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

Селектор выше выбирает любой элемент, который содержит целевую строку. Foundin будет объектом jQuery, который содержит любой соответствующий элемент. См. информацию об API по адресу: https://api.jquery.com/contains-selector/

С подстановочным знаком '*' следует отметить, что вы получите все элементы, включая элементы html a body, которые вам, вероятно, не нужны. Поэтому в большинстве примеров в jQuery и других местах используется $ ('div: Содержит ("Я простая строка")')

Ответ 2

Обычно селекторы jQuery не выполняют поиск в "текстовых узлах" в DOM. Однако, если вы используете функцию .contents(), будут включены текстовые узлы, тогда вы можете использовать свойство nodeType для фильтрации только текстовых узлов и свойство nodeValue для поиска текстовой строки.

    $('*', 'body')
        .andSelf()
        .contents()
        .filter(function(){
            return this.nodeType === 3;
        })
        .filter(function(){
            // Only match when contains 'simple string' anywhere in the text
            return this.nodeValue.indexOf('simple string') != -1;
        })
        .each(function(){
            // Do something with this.nodeValue
        });

Ответ 3

Это выберет только элементы листа, содержащие "Я простая строка".

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

Вставьте следующее в адресную строку, чтобы проверить его.

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

Если вы хотите захватить просто "Я простая строка". Сначала оберните текст таким элементом.

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

а затем сделайте это.

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

Ответ 4

Если вы просто хотите, чтобы node был ближе всего к тексту, который вы ищете, вы можете использовать это:

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

Это будет работать, если ваш HTML выглядит так:

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

Используя вышеприведенный селектор, вы найдете тег <strong>, так как это последний тег, содержащий эту целую строку.

Ответ 5

Посмотрите highlight (плагин jQuery).

Ответ 6

Просто добавив к ответу Тони Миллера, так как это дало мне 90% к тому, что я искал, но все равно не сработало. Добавление .length > 0; в конец его кода заставило мой скрипт работать.

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

Ответ 7

эта функция должна работать. в основном рекурсивный поиск, пока мы не получим отдельный список листовых узлов.

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