I'm following this example and typed $( "div:contains('John')" ).css( "text-decoration", "underline" ); , but got an exception:
VM23376:1 Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': 'div:contains('John')' is not a valid selector.
You can use JS vanilla to do this :
function contains(selector, text) {
var elements = document.querySelectorAll(selector);
return Array.from(elements).filter(function(element) {
return RegExp(text).test(element.textContent);
});
}
// Run Code
let found = contains('span', 'Find');
// You can also search with regex
found = contains('span', 'Find\\s*[A-Za-z]+');
for (let i = 0; i < found.length; i++) {
let elem = found[i];
elem.style.backgroundColor = 'red';
}<p>Some text where you have span tag that said <span>Find Me</span></p>I guess it was a copy-paste issue.
OP typed 'div:contains('John')' instead of "div:contains('John')".
Properly copy-pasted code works without any problem.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contains demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$( "div:contains('John')" ).css( "text-decoration", "underline" );
</script>
</body>
</html>function '$' is unknow. You probably trying to execute this code in place where jQuery library wasn't loaded.
$( "div:contains('John')" ).css( "text-decoration", "underline" );<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
John
</div>