Keep checking If Div contains specific text

Question

Hello So I want to keep checking a function and if a div contains a specific text here is what I have so far but it doesn't seem to be working any ideas?

JS

var interval = 500;
var timer = window.setInterval(function() {
    var text = $('.text-split-original').text();
    var checkText = '4) PLACEHOLDER '

    if(text == checkText){
        alert("It has this text");
        //do something
    };
}, interval);

HTML

<div class="sar__label">
    <div class="text-split-original">
        4) PLACEHOLDER 
        <br>
    </div>
</div>

Thanks in advance for any help.

I guess `checkText` should be something else that the default content that you have in your div right? — eltonkamami, Dec 21 '17 at 20:57
I believe `.text()` works on all elements of the collection. So may just take the first one `$('.text-split-original').eq(0).text()` — Jonas Wilms, Dec 21 '17 at 20:57
Trimming your text will get you closer: `var text = $.trim($('.text-split-original').text());`... but I wonder why you're doing this... there's almost always a better solution than polling. — Jason P, Dec 21 '17 at 20:59
Should also trim the checkText var... it has a space at the end. — René, Dec 21 '17 at 20:59
Apparently checkText is not defined my code is blow all other scripts and jquery — user3112634, Dec 21 '17 at 21:06

score 2 · Accepted Answer · answered Dec 21 '17 at 21:03

2

You just need to trim the spaces off and it works fine.

var interval = 500;
var timer = window.setInterval(function() {
    var text = $.trim($('.text-split-original').text());
    var checkText = $.trim('4) PLACEHOLDER ')

    if(text == checkText){
        alert("It has this text");
        //do something
    };
}, interval);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="sar__label">
    <div class="text-split-original">
        4) PLACEHOLDER 
        <br>
    </div>
</div>

answered Dec 21 '17 at 21:03

Scath

3,777
10
29
40

No need to trim ```checkText```, could directly do ```var checkText = '4) PLACEHOLDER'``` – GMaiolo Dec 21 '17 at 21:06
Trim everything! I wanted to change as little of their code as possible. – Scath Dec 21 '17 at 21:07

Liam · Answer 2 · 2017-12-22T19:05:13.903

1

Adding .trim() will remove the whitespace that is causing the comparison to fail:

var text = $('.text-split-original').text().trim();

Additionally, the checkText string '4) PLACEHOLDER ' contains an extra space at the end, which will also break the comparison.

Beyond that, running an interval is not the most efficient way to do things. ~~Perhaps you may want to look at when the contents of the div change instead.~~ edit: This is deprecated as pointed out by @Barmar, see MutationObserver instead.

See your fixed code here (I've commented out the interval to prevent spamming yourself): https://codepen.io/anon/pen/JMRbMx

edited Dec 22 '17 at 19:05

answered Dec 21 '17 at 21:05

Liam

1,041
2
17
31

1

The `DOMSubtreeModified` event used to detect changes is deprecated, so it's not a good idea to recommend it. – Barmar Dec 21 '17 at 21:32
@Barmar Thank you for pointing that out, I wasn't aware. The answer has been updated. – Liam Dec 22 '17 at 19:05

score 1 · Answer 3 · answered Dec 21 '17 at 21:07

Without JQuery:

<html>
<script>
var interval = 500;
var timer = window.setInterval(function() {
    var text = document.getElementById('myId').innerHTML;
    var checkText = 't'
    console.log(text);
    console.log(checkText);

    if(text == checkText){
        alert("It has this text");
        //do something
    };
}, interval);
</script>

<div class="sar__label">
    <div id="myId" class="text-split-original">t</div>
</div>

</html>

I've intentionally erased all the spaces in the div. You need to trim() the spaces, or manipulate the text to match you case.

score 0 · Answer 4 · answered Dec 21 '17 at 21:11

A great plugin to do just this is at https://j11y.io/javascript/monitoring-dom-properties/ -- and yeah, it does so by setInterval/clearInterval. But the idea of a simple watch() plugin makes me happy.

Granted, its older (ca. 2009), but it still works.

/**********
 * jQuery plugin to allow monitoring of any
 *  DOM el's properties. It does so by
 *  a setInterval/clearInterval hook. Taken from
 * https://j11y.io/javascript/monitoring-dom-properties/
 **********/

jQuery.fn.watch = function(id, fn) {

  return this.each(function() {

    var self = this;

    var oldVal = self[id];
    $(self).data(
      'watch_timer',
      setInterval(function() {
        if (self[id] !== oldVal) {
          fn.call(self, id, oldVal, self[id]);
          oldVal = self[id];
        }
      }, 100)
    );

  });

  return self;
};

jQuery.fn.unwatch = function(id) {

  return this.each(function() {
    clearInterval($(this).data('watch_timer'));
  });
};

/***** 
 * This is the part that does stuff.
 *   The updater updates that content div
 *   and the contentEl.watch leverages the
 *   above extensible plugin. It's watching
 *   the vanilla 'innerText' attribute of
 *   that DOM el.
 *****/

var contentEl = $(".content");

$(".updater").on("keyup", function() {
  contentEl.text($(this).val())
})

contentEl.watch("innerText", function(propName, oldVal, newVal){
    console.log('Text has been changed from '+oldVal+' to ' + newVal);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">

</div>
<input type="text" class="updater" />

Keep checking If Div contains specific text

4 Answers4