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.
4 answers
solution1
2 ACCPTED 2017-12-21 21:03:34
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>
solution2
1 2017-12-21 21:05:08
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
solution3
1 2017-12-21 21:07:43
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.
solution4
0 2017-12-21 21:11:44
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" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.