jQuery 通过其内容的完全匹配来选择元素

Select element by exact match of its content

提问by julian

All right, I wonder if there is a way to make the :contains()jQuery's selector to select elements with onlythe string that is typed in

好吧，我不知道是否有一种方法可以让:contains()jQuery的选择，选择的元素仅是在输入字符串

for example -

例如 -

<p>hello</p>
<p>hello world</p>

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

The selector will select both pelements and make them bold, but I want it to select only the first one.

选择器将选择两个p元素并使它们加粗，但我希望它只选择第一个。

回答by T.J. Crowder

No, there's no jQuery (or CSS) selector that does that.

不，没有 jQuery（或 CSS）选择器可以做到这一点。

You can readily use filter:

您可以轻松使用filter：

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

It's not a selector, but it does the job. :-)

它不是一个选择器，但它完成了这项工作。:-)

If you want to handle whitespace before or after the "hello", you might throw a $.trimin there:

如果你想在“hello”之前或之后处理空格，你可以$.trim在那里扔一个：

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

For the premature optimizers out there, if you don't care that it doesn't match <p><span>hello</span></p>and similar, you can avoid the calls to $and textby using innerHTMLdirectly:

对于那里的过早优化器，如果您不在乎它不匹配<p><span>hello</span></p>和相似，则可以避免调用$和直接text使用innerHTML：

return this.innerHTML === "hello";

...but you'd have to have a lotof paragraphs for it to matter, so many that you'd probably have other issues first. :-)

...但你必须有很多段落才能让它重要，太多以至于你可能首先会遇到其他问题。:-)

回答by Amadu Bah

Try add a extend pseudo function:

尝试添加一个扩展伪函数：

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

Then you can do:

然后你可以这样做：

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

回答by bwest87

So Amandu's answer mostly works. Using it in the wild, however, I ran into some issues, where things that I would have expected to get found were not getting found. This was because sometimes there is random white space surrounding the element's text. It is my belief that if you're searching for "Hello World", you would still want it to match " Hello World ", or even "Hello World \n". Thus, I just added the "trim()" method to the function, which removes surrounding whitespace, and it started to work better.

所以阿曼杜的回答大多有效。然而，在野外使用它时，我遇到了一些问题，我期望找到的东西没有找到。这是因为有时元素的文本周围会有随机的空白。我相信，如果您正在搜索“Hello World”，您仍然希望它匹配“Hello World”，甚至“Hello World \n”。因此，我只是在函数中添加了“trim()”方法，它删除了周围的空白，它开始工作得更好。

Specifically...

具体来说...

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

Also, note, this answer is extremely similar to Select link by text (exact match)

另请注意，此答案与按文本选择链接（完全匹配）非常相似

And secondary note... trimonly removes whitespace before and afterthe searched text. It does not remove whitespace in the middle of the words. I believe this is desirable behavior, but you could change that if you wanted.

次要注意...trim只删除搜索文本前后的空格。它不会删除单词中间的空格。我相信这是可取的行为，但如果你愿意，你可以改变它。

回答by dsgriffin

You can use jQuery's filter()function to achieve this.

您可以使用 jQuery 的filter()函数来实现这一点。

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

回答by rf1234

I found a way that works for me. It is not 100% exact but it eliminates all strings that contain more than just the word I am looking for because I check for the string not containing individual spaces too. By the way you don't need these " ". jQuery knows you are looking for a string. Make sure you only have one space in the :contains( ) part otherwise it won't work.

我找到了一种适合我的方法。它不是 100% 准确，但它消除了所有包含的不仅仅是我正在寻找的单词的字符串，因为我检查了不包含单个空格的字符串。顺便说一下，您不需要这些“”。jQuery 知道您正在寻找一个字符串。确保 :contains( ) 部分中只有一个空格，否则它将不起作用。

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

And yes I know it won't work if you have stuff like <p>helloworld</p>

是的，我知道如果你有类似的东西它不会工作 <p>helloworld</p>

回答by Greg A

Like T.J. Crowder stated above, the filter function does wonders. It wasn't working for me in my specific case. I needed to search multiple tables and their respective td tags inside a div (in this case a jQuery dialog).

就像上面提到的 TJ Crowder 一样，过滤器功能确实很神奇。在我的具体情况下，它对我不起作用。我需要在 div（在本例中为 jQuery 对话框）中搜索多个表及其各自的 td 标签。

$("#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.
    }
});

I hope this is helpful to someone!

我希望这对某人有帮助！

回答by leogama

An one-liner that works with alternative librariesto jQuery:

与jQuery 的替代库一起使用的单行：

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

And this is the equivalent to a jQuery's a:contains("pattern")selector:

这相当于 jQuery 的a:contains("pattern")选择器：

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

回答by tymeJV

The .first() will help here

.first() 将在这里有所帮助

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