As said in the title, I'd like to find something like :contains()
but to match an exact string. In other words, it shouldn't be a partial match. For example in this case:
<div id="id">
<p>John</p>
<p>Johny</p>
</div>
$("#id:contains('John')")
will match both John
and Johny
, while I'd like to match only John
.
Thanks in advance.
EDIT: ES2015 one-liner solution, in case anyone looked for it:
const nodes = [...document.querySelectorAll('#id > *')].filter(node => node.textContent === 'John');
console.log(nodes);
/* Output console formatting */
.as-console-wrapper { top: 0; }
.as-console { height: 100%; }
<div id="id">
<p>John</p>
<p>Johny</p>
</div>
You can use filter
for this:
$('#id').find('*').filter(function() {
return $(this).text() === 'John';
});
Edit: Just as a performance note, if you happen to know more about the nature of what you're searching (e.g., that the nodes are immediate children of #id
), it would be more efficient to use something like .children()
instead of .find('*')
.
Here's a jsfiddle of it, if you want to see it in action: http://jsfiddle.net/Akuyq/
jmar777's answer helped me through this issue, but in order to avoid searching everything I started with the :contains selector and filtered its results
var $results = $('#id p:contains("John")').filter(function() {
return $(this).text() === 'John';
});
Heres an updated fiddle http://jsfiddle.net/Akuyq/34/
You could try writing a Regular Expression and searching off of that: Regular expression field validation in jQuery
Simple way is "select element by exact match" using pseudo function.
Solution
Select element by exact match of its content