How to identify the exact element that contains a specific word

Question

To display only the element in which the searched word is found?

In the example below he searches us filhos of container if the searched content is present in the element moves it to the saida.

But in that case by the "parent" element having the word searched, it will be moved whole to the saida, and not the element in which the word is found.

function pesquisar(){
  let container = document.getElementById("container");
  let saida = document.getElementById("saida");
  let input = document.getElementById("input").value.toLowerCase();
  let filhos = container.children;
  for(let i = 0; i < filhos.length; i++){
    if(filhos[i].innerText.toLowerCase().includes(input) || filhos[i].innerText.toLowerCase().indexOf(input) > -1){
      saida.appendChild(filhos[i]);
    }
  }
}

<input type="text" id="input"><button onclick="pesquisar()">Pesquisar</button>
<h3>Entrada</h3>
<div id="container">
  <div class="pai">
    <div class="pai">
      <div class="filho">Conteudo</div>
      <div class="filho">Pesquisado</div>
    </div>
  </div>
</div>
<h3>Saida</h3>
<div id="saida"></div>

Answer 1

The .children only returns direct children (not grandchildren, great-grandchildren, etc.). Your code is searching within the only direct child of #container if there is the searched text. Both the innerText as to the includes search all the text within the element, no matter where it is (whether in children, grandchildren, great-grandchildren etc.), so it will return the first <div class="pai"> (I repeat: only direct child of the div #container that the .children returns).

What you can do is use the .querySelectorAll("*"); in the div #container. This method will return all elements and not only the direct children of #container. Then you make a second loop for running through the knots with .childNodes checking if it’s a text node (nodeType == 3) and if this text has the search term. If found, you take the parent element .parentNode from that node and makes the append:

Obs.: use textContent instead of innerText, since a text node is not an internal content element.

function pesquisar(){
  let container = document.getElementById("container");
  let saida = document.getElementById("saida");
  let input = document.getElementById("input").value.toLowerCase();
  let filhos = container.querySelectorAll("*");
  for(let i = 0; i < filhos.length; i++){
     let nodes = filhos[i].childNodes;
     for(let i = 0; i < nodes.length; i++){
       if(nodes[i].nodeType == 3 && (nodes[i].textContent.toLowerCase().includes(input) || nodes[i].textContent.toLowerCase().indexOf(input) > -1)){
         saida.appendChild(nodes[i].parentNode);
       }
     }
  }
}

<input type="text" value="Conteudo" id="input"><button onclick="pesquisar()">Pesquisar</button>
<h3>Entrada</h3>
<div id="container">
  <div class="pai">
    <div class="pai">
      <div class="filho">Conteudo</div>
      <div class="filho">Pesquisado</div>
    </div>
  </div>
</div>
<h3>Saida</h3>
<div id="saida"></div>