通过内容完全匹配选择元素

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

例如 -

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

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

选择器将选择两个p元素并使它们变为粗体，但我希望它仅选择第一个。

不，没有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>或相似，则可以直接使用来避免调用$和：textinnerHTML

return this.innerHTML === "hello";

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

尝试添加扩展伪函数：

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

然后，您可以执行以下操作：

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

您可以使用jQuery的filter（）函数来实现此目的。

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

因此，阿曼杜的答案大都可行。但是，在野外使用它时，我遇到了一些问题，在这些问题中，我本来希望找到的东西没有找到。这是因为有时元素的文本周围会有随机的空白。我相信，如果您要搜索“ 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仅删除搜索到的文本前后的空格。它不会删除单词中间的空格。我相信这是理想的行为，但是您可以根据需要更改它。

我找到了一种对我有用的方法。它不是100％精确的，但是它会消除所有包含的字符串多于我要查找的单词，因为我检查的字符串也不包含单个空格。顺便说一下，您不需要这些“”。jQuery知道您正在寻找一个字符串。确保：contains（）部分中只有一个空格，否则它将不起作用。

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

是的，我知道如果您有类似的东西，它将无法正常工作 <p>helloworld</p>

就像上面提到的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.
    }
});

我希望这对某人有帮助！

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

.first（）在这里会有所帮助

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