Найти текстовую строку, используя jQuery?

241

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

Кит Донеган
источник

Ответы:

327

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: Содержит ("Я простая строка")')

Тони Миллер
источник
12
@ Тони, как бы я манипулировал только соответствующим текстом, а не только целым параграфом, div и т. Д. И т. Д.?
Кит Донеган
12
Следует отметить, что это с учетом регистра. Пользователь с именем «я» написал это на странице документации jQuery: $ .expr [':']. Icontains = function (obj, index, meta, stack) {return (obj.textContent || obj.innerText || jQuery ( obj) .text () || '') .toLowerCase (). indexOf (meta [3] .toLowerCase ())> = 0; }; Пример: $ ("div: icontains ('John')"). Css ("text-decor", "underline");
Брэндон Блум
это работает для JSON? Что, если я хочу отфильтровать текст в значении json?
Чамильян
5
Это не будет работать, если текстовый узел имеет разрыв строки, например. Msgstr "Я простая строка \ n". Обратите внимание, что разрыв строки не будет отображаться, поэтому пользователь даже не узнает, в чем проблема. Все эти решения имеют эту проблему. См. Jsfiddle.net/qPeAx
Джеспер
9
-1, не работает. Он возвращает все родительские узлы в дереве, вы хотите только самый нижний.
TMS
51

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

    $ ('*', 'body')
        .andSelf ()
        .contents ()
        .filter (функция () {
            вернуть this.nodeType === 3;
        })
        .filter (функция () {
            // Соответствует только тогда, когда содержит «простую строку» в любом месте текста
            return this.nodeValue.indexOf ('простая строка')! = -1;
        })
        .each (функция () {
            // Делаем что-то с this.nodeValue
        });
BarelyFitz
источник
8
Чтобы уточнить, как упоминал Тони, вы можете использовать селектор «: contains ()» для поиска в текстовых узлах, но jQuery не будет возвращать отдельные текстовые узлы в результатах (просто список элементов). Но когда вы используете .contents (), тогда jQuery возвращает как элементы, так и текстовые узлы. Для получения дополнительной информации: docs.jquery.com/Traversing/contents
BarelyFitz,
5
Я озадачен тем, почему вы используете .andSelf(). Из api.jquery.com/andSelf : «Объекты jQuery поддерживают внутренний стек, который отслеживает изменения соответствующего набора элементов. Когда вызывается один из методов обхода DOM, новый набор элементов помещается в стек. Если предыдущий набор элементов также желателен, и может помочь .andSelf (). " Я не вижу предыдущего контекста, что мне не хватает?
Алан Х.
1
Upvoted! Должен быть принятый ответ, потому что он отфильтровывает все родительские узлы, что, на мой взгляд, является общей потребностью в большинстве сценариев.
LucaM
29

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

$('*: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");
Тонкий
источник
3
функция .filter () будет более полезной, чем .each (). Фактически, вы могли бы поместить его в один селектор: «*: Содержит (« бла »): пусто»
nickf
2
#nickf -: пусто не будет выбирать текстовый узел, который содержит текст. Так что, если текстовый узел содержит «Я простая строка», это исключается. docs.jquery.com/Selectors/empty
Slim
2
Я знаю, что немного опоздал, но не будут ли игнорироваться текстовые блоки, где строка существует на верхнем уровне, но в ней есть дочерние элементы? Например: <blockquote> Я простая строка <span style = "font-weight: bold;"> ЖИТЬ НА КРАЕ </ span> </ blockquote>
Кен Беллоуз
Я просто хочу упомянуть, что «containsStringImLookingFor» не является допустимым HTML-атрибутом. Пожалуйста, используйте для HTML 5 "data-containsStringImLookingFor". В версии HTML, более ранней, чем 5, нет возможности добавлять пользовательские атрибуты ...
Snickbrack
17

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

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

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

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

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

nickf
источник
1
Это не похоже на работу. Например, на этой странице *: содержит ("the"): last возвращает только 1 элемент.
bzlm
4
@bzlm: ну, это не обязательно указывает, что он хотел найти несколько вхождений.
nickf
2
Ага. Есть ли способ заставить его работать для нескольких случаев? Я думаю, что это более элегантное решение, чем те, которые включают рекурсивную проверку типов узлов и т. Д.
bzlm
1
единственный способ, которым я мог бы подумать, чтобы получить все узлы, но не всех предков вверх по линии, это перебрать результат, удалив всех родителей, хотя у вас могут быть проблемы, например: <p>my text <b>my text</b></p>- удаление предков <b>тега проиграть другой матч
nickf
7

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

 $(function() {
    var foundin = $('*:contains("I am a simple string")').length > 0;
 });
Pixelomo
источник
Как добавить новое слово в найденную строку? Я хочу добавить звездочку на этой найденной работе.
userAZLogicApps
@SaMolPP foundin += '*';
Pixelomo,
2

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

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;
}
danatcofo
источник