Search HTML LIKE style %.. %

Question

How can I search in HTMLS style LIKE %..% type I own these Divs with these styles

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

How can I search within all named classes texto_de_reportagem the name of Lubiscréia for example? Or if I put in "search" the word tal he would return me all the Rows since they all have the word tal... The same way Mysql works understands?

Answer 1

Creates a function that looks for a word in a list of elements.

I made an example that also accepts option to search respecting (or not) have large letter.

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;
    });
}

What this function does is to search in the .innerHTML of each element by the position of the word you want. If he does not find the .indexOf() gives -1.

jsFiddle: http://jsfiddle.net/6q5uzhym/

Answer 2

Using only javavascript:

window.onload = function () {
  var like = "Alterbania".toLowerCase(); // evitar case sensitive
  var divs = document.getElementsByTagName('div');
  var encontrados = [];
  for (var i = 0; i < divs.length; i++) {
     if (divs[i].innerHTML.toLowerCase().indexOf(like) > -1) {
         encontrados.push(divs[i]);
     }
  }
  console.log(encontrados);
  alert("Encontrado: " + encontrados.length);
  return encontrados;
}

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

Using jquery:

$(document).ready(function () {
  
  /* ajusta o constains pra pegar case sensitive */
  jQuery.expr[':'].contains = function(a, i, m) {
    return jQuery(a).text().toLowerCase()
        .indexOf(m[3].toLowerCase()) > -1;
  };  
  
  var like = "Alterbania".toLowerCase();
  var encontrados = $('div:contains("' + like + '")');
  console.log(encontrados);
  alert("Encontrado: " + encontrados.length);
  return encontrados;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

The example below returns all Divs with the value "Lubiscréia".

$( "div:contains('Lubiscréia')" );

Or even, filtering by class:

$("span[class='texto_de_reportagem']").filter(":contains('Lubiscréia')");