继续检查Div是否包含特定文本

Question

您好，所以我想继续检查一个函数，如果一个div包含特定文本，这是我到目前为止的内容，但是似乎没有任何作用？

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>

在此先感谢您的帮助。

Answer 1

您只需要修剪空间就可以了。

 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>

Answer 2

添加.trim()将删除导致比较失败的空白：

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

另外， checkText字符串'4) PLACEHOLDER '在末尾包含一个额外的空格，这也会破坏比较。

除此之外，运行间隔不是执行事情的最有效方法。 ~~也许您可能想看看div的内容何时更改。~~ 编辑：不推荐使用，如@Barmar所指出，请参阅MutationObserver 。

在此处查看您的固定代码（我已注释掉间隔以防止自己发垃圾邮件）： https : //codepen.io/anon/pen/JMRbMx

Answer 3

没有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>

我故意删除了div中的所有空格。 您需要trim（）空格，或操纵文本以匹配大小写。

Answer 4

一个很好的插件可以在https://j11y.io/javascript/monitoring-dom-properties/上找到 -是的，它是通过setInterval / clearInterval实现的。 但是一个简单的watch（）插件的想法让我很高兴。

当然，它的版本较旧（大约2009年），但仍然有效。

 /********** * 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" />

继续检查Div是否包含特定文本

问题描述

4 个解决方案

解决方案1
2 已采纳 2017-12-21 21:03:34

解决方案2
1 2017-12-21 21:05:08

解决方案3
1 2017-12-21 21:07:43

解决方案4
0 2017-12-21 21:11:44

继续检查Div是否包含特定文本

问题描述

4 个解决方案

解决方案1 2 已采纳 2017-12-21 21:03:34

解决方案2 1 2017-12-21 21:05:08

解决方案3 1 2017-12-21 21:07:43

解决方案4 0 2017-12-21 21:11:44

解决方案1
2 已采纳 2017-12-21 21:03:34

解决方案2
1 2017-12-21 21:05:08

解决方案3
1 2017-12-21 21:07:43

解决方案4
0 2017-12-21 21:11:44