jquery - 通过内容的完全匹配来选择元素

Question

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

例如 -

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

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

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

Answer 1

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

您可以轻松使用filter：

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

它不是一个选择器，但它可以完成工作。:-)

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

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

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

return this.innerHTML === "hello";

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

Answer 2

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

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

然后你可以这样做：

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

Answer 3

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

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

Answer 4

所以阿曼杜的回答大多有效。然而，在野外使用它时，我遇到了一些问题，我期望找到的东西没有被发现。这是因为有时元素的文本周围会有随机的空白。我相信，如果您正在搜索“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;
}

另外，请注意，此答案与Select link by text (exact match)极为相似

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

Answer 5

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

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

是的，我知道如果你有类似的东西，它就行不通了<p>helloworld</p>

Answer 6

就像上面提到的 TJ Crowder 一样，过滤器功能确实很神奇。在我的具体情况下，它对我不起作用。我需要在 div 中搜索多个表及其各自的 td 标签（在本例中为 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.
    }
});

我希望这对某人有帮助！

Answer 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/));

Answer 8

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

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