Выбрать элемент по точному соответствию его содержимому

Ответ 1

Нет, нет селектора jQuery (или CSS), который делает это.

Вы можете легко использовать filter:

$("p").filter(function() {
    return $(this).text() === "hello";
}).css("font-weight", "bold");

Это не селектор, но он выполняет эту работу.: -)

Если вы хотите обрабатывать пробелы до или после "привет", вы можете добавить $.trim:

return $.trim($(this).text()) === "hello";

Для преждевременных оптимизаторов там, если вам все равно, что он не соответствует <p><span>hello</span></p> и тому подобное, вы можете избежать вызовов $ и text с помощью innerHTML напрямую:

return this.innerHTML === "hello";

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

Ответ 2

Попробуйте добавить псевдослучайную функцию:

$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});

Затем вы можете сделать:

$('p:textEquals("Hello World")');

Ответ 3

Итак, ответ Аманду в основном работает. Однако, используя это в дикой природе, я столкнулся с некоторыми проблемами, когда вещи, которые я ожидал получить, не нашли. Это было потому, что иногда есть случайное белое пространство, окружающее текст элемента. Я считаю, что если вы ищете "Hello World", вы все равно хотите, чтобы он соответствовал "Hello World" или даже "Hello World\n". Таким образом, я просто добавил метод "trim()" к функции, которая удаляет окружающие пробелы, и она начала работать лучше.

В частности...

$.expr[':'].textEquals = function(el, i, m) {
    var searchText = m[3];
    var match = $(el).text().trim().match("^" + searchText + "$")
    return match && match.length > 0;
}

Кроме того, обратите внимание: этот ответ очень похож на Выберите ссылку по тексту (точное совпадение)

И вторичное примечание... trim удаляет только пробелы до и после искомого текста. Он не удаляет пробелы в середине слов. Я считаю, что это желательно поведение, но вы можете изменить это, если хотите.

Ответ 4

Вы можете использовать функцию jQuery filter() для достижения этой цели.

$("p").filter(function() {
// Matches exact string   
return $(this).text() === "Hello World";
}).css("font-weight", "bold");

Ответ 5

Я нашел способ, который работает для меня. Это не на 100% точно, но исключает все строки, которые содержат больше, чем просто слово, которое я ищу, потому что я проверяю строку, не содержащую также отдельных пробелов. Кстати, вам не нужны эти "". JQuery знает, что вы ищете строку. Убедитесь, что у вас есть только один пробел в части: contains(), иначе он не будет работать.

<p>hello</p>
<p>hello world</p>
$('p:contains(hello):not(:contains( ))').css('font-weight', 'bold');

И да, я знаю, что это не сработает, если у вас есть что-то вроде <p>helloworld</p>

Ответ 6

Подобно T.J. Кроудер заявил выше, функция фильтра делает чудеса. Это не работало для меня в моем конкретном случае. Мне нужно было искать несколько таблиц и их теги td внутри div (в этом случае диалог jQuery).

$("#MyJqueryDialog table tr td").filter(function () {
    // The following implies that there is some text inside the td tag.
    if ($.trim($(this).text()) == "Hello World!") {
       // Perform specific task.
    }
});

Надеюсь, это кому-то поможет!

Ответ 7

Однострочник, который работает с альтернативными библиотеками для jQuery:

$('p').filter((i, p) => $(p).text().trim() === "hello").css('font-weight', 'bold');

И это эквивалент селектора jQuery a:contains("pattern"):

var res = $('a').filter((i, a) => $(a).text().match(/pattern/));

Ответ 8

Помогает здесь .first()

$('p:contains("hello")').first().css('font-weight', 'bold');