javascript - 在页面 HTML 上搜索字符串后出现警报通知 "not found"

Question

我有这个搜索代码 html

<form method="" action="">
  <div class="input-group">
   <input type="text" id="search" class="form-control" placeholder="Masukan No Hp yg Akan Dicari.." >
                  <span class="input-group-btn">
                <input type="button" id="submit_form" onclick="checkInput()" value="Cari" class="btn btn-primary">
    </div>
</form>

这是我的 JS 代码

<script>
    function checkInput() {
        var query = document.getElementById('search').value;
        window.find(query);
        return true; 

        }
</script> 

我想添加警报通知... 如果搜索在我的页面中找不到的字符串

Answer 1

不要使用window.find。如mdn说:

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

只需搜索文档的 textContent 字符串即可:

document.querySelector('#submit_form')
  .addEventListener('click', (e) => {
    e.preventDefault();
    const query = document.querySelector('#search').value;
    console.log('Found: ' + document.body.textContent.includes(query));
  });

<form method="" action="">
  <div class="input-group">
    <input type="text" id="search" class="form-control" placeholder="Masukan No Hp yg Akan Dicari..">
    <span class="input-group-btn"></span>
                <input type="button" id="submit_form" value="Cari" class="btn btn-primary">
    </div>
</form>
<div>text1</div>
<div>text2</div>

尝试搜索 text1 和 text3