JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" />
<div class="hidden">
<div class="texto_de_reportagem">Olá meu nome é fulana de tal e nasci assim vou morrer assim Fulaninhanhá..</div>
<div class="texto_de_reportagem">Olá meu nome é Alterbania de tal e nasci assim vou morrer assim Fulaninhanhá..</div>
<div class="texto_de_reportagem">Olá meu nome é Iscrovenia de tal e nasci assim vou morrer assim Fulaninhanhá..</div>
<div class="texto_de_reportagem">Olá meu nome é Lubiscréia de tal e nasci assim vou morrer assim Fulaninhanhá..</div>
</div>
<div id="mostrador"></div>
CSS
.hidden {
display: none;
}
JavaScript
function encontrar(palavra, elementos, caseSensitive) {
return [].filter.call(textos, function (texto) {
var innerHTML = texto.innerHTML;
if (!caseSensitive) {
innerHTML = innerHTML.toLowerCase();
palavra = palavra.toLowerCase();
}
return innerHTML.indexOf(palavra) != -1;
});
}
// as divs
var textos = document.querySelectorAll('.hidden .texto_de_reportagem');
// exemplo para a consola
var textosCom_Alterbania = encontrar('Alterbania', textos);
var textosCom_nome = encontrar('nome', textos);
console.log(textosCom_Alterbania);
console.log(textosCom_nome);
// exemplo para o input
var destino = document.getElementById('mostrador');
document.querySelector('input').addEventListener('keyup', function(){
var els = encontrar(this.value, textos);
var el;
destino.innerHTML = '';
while (el = els.shift()) destino.appendChild(el);
});