在AJAX调用后搜索页面上的单词

Searching for a word on a page after an AJAX call

本文关键字:单词 搜索 AJAX 调用      更新时间:2023-09-26

通过使用JavaScript或jQuery,我试图弄清楚如果一个词,说"卡萨布兰卡",在页面上可用?

我正在处理的页面使ajax调用改变页面的内容。所以我应该在ajax调用后搜索单词"casablanca"。

到目前为止我找到的最好的方法是:

window.find('casablanca');

但是这段代码突出了这个单词,这是我不想要的。

有更好的方法吗?

谢谢!

这里有一个快速且程序化的方法来确定当前HTML页面是否包含特定的关键字:

function pageContains(str) {
    return document.body.innerHTML.toString().indexOf(str) > -1;
}

JSFiddle: https://jsfiddle.net/shj4LwqL/


请注意,上面的代码搜索关键字在页面的body标签,所以如果你有你的JavaScript在页面主体,你的关键字是写在你的JavaScript字符串,那么你会得到一个假阳性。如果希望在特定元素中搜索,则可以使用以下变体:

function elementContains(el, str) {
    return el.innerHTML.toString().indexOf(str) > -1;
}

只能在内容中搜索,不能在标签中搜索,依此类推:

function searchInPage(val) {
    var allElements = document.getElementsByTagName('*');
    for(var i = 0; i < allElements.length; i++) {
        var node = allElements[i].firstChild;
        //Is it a text node?
        if(node !== null && node.nodeType === 3) {
            if(node.nodeValue == val) return true;
        }
    }
    return false;
}

untestest 它告诉你怎么做

尝试使用.contents(), .is()返回Boolean;将.filter()替换为.is()以返回包含选定文本的元素,如果true,则返回false,如果未找到包含选定文本的节点

var res = $("body").contents().is(function(i, el) {
  return $(":contains(casablanca)").is(el)
}); console.log(res)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post-text" itemprop="text">
  <p>By using JavaScript or jQuery, I am trying to figure out if a word, say "casablanca", is available on the page?</p>
  <p>The page I am working on makes an ajax call which changes the content of the page. So I am supposed to search for the word "casablanca" after the ajax call.</p>
  <p>The best way I have found so far is:</p>
  <pre class="default prettyprint prettyprinted"><code><span class="pln">window</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">'casablanca'</span><span class="pun">);</span></code></pre>
  <p>But this code highlights the word, which is something I don't want.</p>
  <p>Is there a better way?</p>
  <p>Thank you!</p>
</div>