How to deal with upper and lower case letters along with Symbols

Navigation
4

I have the following snippet running cute: 

function busca() {
  var str = document.getElementById('txt').value;
  
  if(document.getElementById(str))
    console.log(str + ' existe.');
  else
    console.log(str + ' ñ existe');
}
<input type="text" id="txt"><input type="button" value="mais" onclick="busca()">

<pre>Ex.: vaca, boi, porco ou galinha</pre>

<div id='vaca'></div>
<div id='boi'></div>
<div id='porco'></div>
<div id='galinha'></div>

Now I want to deal with some more details ...

Let's suppose that in the HTML document there are other id segmented like this:

id='vaca-leiteira'

id='boi-nelore'

id='Porco_granja'

id='gaLinha_caIpirA'

Note that we have their designation followed by a hyphen or underline , and having some variations between "vowels" and "consonants" being uppercase and / or lowercase .

How can I resolve this when typing in the text field? Type:

  • Dairy cow

  • Chicken hen

and / or underline , and I still put some vowel or consonant in upper case and / or < in> lowercase outside the scope of the ID, all on purpose. I still want the right result.

  

In all the charade is, ignore these points and bring the final result. Would you have to use some RegExp ?

    
asked by anonymous 13.04.2017 / 12:46

3 answers

3

Diego follows an solution solution I wrote here, basically what I do is get all the ids of elements, then I remove all special characters with .replace(/[^\w\s]/gi, ' ') and leave them in 

function busca() {
  var str = document.getElementById('txt').value;

  var ids = pegaTodosIds();
  var idsFormatados = FormataIds(ids);

  //if (idsFormatados.includes(str.toLowerCase()))
  if (idsFormatados.indexOf(str.toLowerCase()) > -1)
    console.log(str + ' existe.');
  else
    console.log(str + ' ñ existe');
}


function pegaTodosIds() {
  var todosElementos = document.getElementsByTagName("*");
  var todosIds = [];
  for (var i = 0, n = todosElementos.length; i < n; ++i) {
    var elemento = todosElementos[i];
    if (elemento.id) {
      todosIds.push(elemento.id);
    }
  }
  return todosIds;
}

function FormataIds(ids) {
  var idsFormatados = [];
  for (var i = 0; i < ids.length; i++) {
    //console.log(ids[i]);
    var nova_str = ids[i].replace(/[^\w\s]/gi, ' ').replace('_', ' ').toLowerCase();
    idsFormatados.push(nova_str);
  }
  return idsFormatados
}
<input type="text" id="txt"><input type="button" value="mais" onclick="busca()">

<pre>Ex.: vaca, boi, porco ou galinha</pre>

<div id='vaca' class=''></div>
<div id='boi'></div>
<div id='porco'></div>
<div id='galinha'></div>
<div id='vaca-leiTeira'></div>
<div id='cavaLo_crioulo'></div>
<div id='porco-aranha'></div>
<div id='gaLinha_caIpirA'></div>
    
13.04.2017 / 14:09
1

To do this in the most performative way possible, I suggest using a map / dictionary. In Javascript, every object is a dictionary, so you already have half a way.

Put all your elements in a dictionary. I suggest giving a common class to the elements in which you will search. For example, "agro". I.e.: 

<div id="pato" class="agro"></div>
<div id="urtiga" class="agro"></div>

So you get all the elements as follows: 

var elementos = document.getElementsByClassName("agro");

The getElementsByClassName method returns a vector. Now you convert the vector to a map, already normalized the keys to an all-tiny pattern with no non-accented letters. The value of each key can be anything, as long as it is logically different from false. 

var mapa = {};
for (var i = 0; i < elementos.length; i++) {
    string id = elementos[i].id;
    id = id.replace(/[^a-zA-Z]/g, "");
    id = id.toLowerCase();

    mapa[id] = true;
}

Now, to find out if there is any element corresponding to an informed text, it's easy: 

var texto = document.getElementById('txt').value;
var input = texto.replace(/[^a-zA-Z]/g, "").toLowerCase();
var existe = !!mapa[input];

console.log(texto + (existe ? " existe" : " não existe"));
    
13.04.2017 / 14:01
0

I am grateful to Renan and Mathias that gave me their answers, where I could reach the final result: 

function busca() {

var elemento = document.getElementsByTagName('div');

    var texto = document.getElementById('txt').value;

    var campo = texto.replace(/[^a-zA-Z]/g, " ").toLowerCase();

var mapa = [];

    for (var i in elemento) {
        var identifica = elemento[i].id;
    var resultado = identifica.replace(/[^a-zA-Z]/g, " ").toLowerCase();

        mapa.push(resultado);
    }

if (mapa.indexOf(campo) > -1)
 
		console.log("Sim temos " + texto);
  	    else 
		console.log("Não temos " + texto);
}
<input type="text" id="txt"><input type="button" value="mais" onclick="busca()">

<pre>
Exemplos: vaca, boi, porco ou galinha

	- ou -

vaca Leiteira, boi nelore, Porco granja, gaLinha caIpirA'
</pre>

<div id='vaca' class=''></div>
<div id='boi'></div>
<div id='porco'></div>
<div id='galinha'></div>
<div id='vaca-leiteira'></div>
<div id='boi-nelore'></div>
<div id='Porco_granja'></div>
<div id='gaLinha_caIpirA'></div>

Explanation

The method replace with regular expression /[^a-zA-Z]/g , removes the symbols hyphen / underline

And allied with toLowerCase() , which leaves the uppercase in lowercase

Now we can check with if if it matches.

    
13.04.2017 / 17:12
How to pick up / drop object in localstorage? Script to leave my site (game) mute