Select div class containing specific text

Question

I am trying to select a div class having specific text.

Example: <div class="foo">Foo39</div>

So, If foo class contain "foo39" text then it should be red and if it contain other text then it should be green!

I tried using CSS but no luck!

@Pangloss: I would say that this is not a duplicate. The cited question asks about checking whether the internal HTML _contains_ a specific string. This question asks about an equality check on the inner HTML. — Kwarrtz, Jul 26 '15 at 02:22
@Kwarrtz You're right, I didn't see the jquery tag and it wasn't mentioned anywhere in the question, glad you worked it out, it is a JS question after all. — Stickers, Jul 26 '15 at 02:28

score 3 · Accepted Answer · answered Jul 26 '15 at 02:17

3

JQuery provides the :contains selector, used like so:

$('.foo:contains(Foo39)').css('background-color', 'red');
$('.foo:not(:contains(Foo39))').css('background-color', 'green');

answered Jul 26 '15 at 02:17

Kwarrtz

2,693
15
24

Good! It worked :) But it turned whole page green with that class! – Yuan Arkiden Jul 26 '15 at 02:22
Solved! Thank you so much Sir! – Yuan Arkiden Jul 26 '15 at 02:25
One last question! How we can fire it when document is ready. Onload or document ready? – Yuan Arkiden Jul 26 '15 at 02:31
`$('document').ready(function() { ... })` – Kwarrtz Jul 26 '15 at 02:32

score 2 · Answer 2 · 2015-07-26T02:59:48.507

2

And with pure javascript since you didnt mention you were using jQuery.... but workes with native querySelctor/All

Using querySelctorAll likely more performant than jquery's .contains

<div class="foo">Foo37</div>
<div class="foo">Foo38</div>
<div class="foo">Foo39</div>
<div class="foo">Foo40</div>

<script>
var find = "Foo40";
var needle;
var haystack = document.querySelectorAll(".foo");
var i;

for (i = 0; i < haystack.length; i++) {
    if(haystack[i].innerHTML == find){
         console.log("found");
         haystack[i].style.background = "red";
    }else{
         haystack[i].style.background = "green";
    }
}
</script>

Using getElementsByClassName likely more performant than querySelectorAll

<div class="foo">Foo37</div>
<div class="foo">Foo38</div>
<div class="foo">Foo39</div>
<div class="foo">Foo40</div>

<script>
var find = "Foo40";
var needle;
var haystack = document.getElementsByClassName("foo");
var i;

for (i = 0; i < haystack.length; i++) {
    if(haystack[i].innerHTML == find){
         console.log("found");
         haystack[i].style.background = "red";
    }else{
         haystack[i].style.background = "green";
    }
}
</script>

edited Jul 26 '15 at 02:59

answered Jul 26 '15 at 02:28

1

How is the performance on this solution? – Kwarrtz Jul 26 '15 at 02:30
1

Well if you mean payload size. If jQuery framework is not required then this would likely be a lighter footprint. From what I have read in the recent past. Going pure javascript with getElementsByTagName or getElementsByClassName is actually a faster performing method over the new native querySelectorAll and definitely over jQuery's .contains and .find methods... – Jul 26 '15 at 02:32
Yes, the footprint would certainly be smaller, but it seems like plain old iteration over a list could be rather painful for large documents. I also believe that the implementation of the `querySelectorAll` function varies between browsers, but I don't imagine it being terribly slow under any circumstances. – Kwarrtz Jul 26 '15 at 02:38
1

You wouldn't select the entire document. You would first find the starting parent element in your querySelectorAll("#myParentElemID .foo"); querySelectorAll support has been around in modern browsers for some time now and was first introduced by IE8. -- And like I mentioned, getElementsByClassName would actually be a better performing lookup. So based on the question and the limited information, native js wins with performance at run time and packet download size. Unfortunately JSPERF.com is down for maintenance at the moment. – Jul 26 '15 at 02:46
Here is the browser support table for querySelector http://caniuse.com/#feat=queryselector @Kwarrtz – Jul 26 '15 at 02:48
And finally I added the usage of getElementsByClassName as a second example which of course if you open jquery's source code you likely will see liberal usage of this and other native features in its selector/filter methods... Going native is often more performant. – Jul 26 '15 at 02:54

Select div class containing specific text

2 Answers2