Limpiar carácteres especiales con RegEx

junihh · #1 (**permalink**) 30/06/2012, 18:12

Hola señores

Estoy preparando una función que me limpie de carácteres especiales alguna cadena de texto (string) que le pase. Escribí lo siguiente:

Código HTML:

var boton = document.getElementById('boton'), campo = document.getElementById('campo');
		
boton.onclick = function()
{
        var ltr = ['à','á','â','ã','ä','ç','è','é','ê','ë','ì','í','î','ï','ñ','ò','ó','ô','õ','ö','ù','ú','û','ü','ý','ÿ','À','Á','Â','Ã','Ä','Ç','È','É','Ê','Ë','Ì','Í','Î','Ï','Ñ','Ò','Ó','Ô','Õ','Ö','Ù','Ú','Û','Ü','Ý',' ','-','_',',',':','"',"'",'&',';','@','.','>','<','|'];
        var rpl = ['a','a','a','a','a','c','e','e','e','e','i','i','i','i','n','o','o','o','o','o','u','u','u','u','y','y','a','a','a','a','a','c','e','e','e','e','i','i','i','i','n','o','o','o','o','o','u','u','u','u','y','','','','','','','','','','','','','',''];
        
        for (var i = 0, c = ltr.length, r = campo.value.toLowerCase(); i < c; i++)
        {
        	var rg = new RegExp(ltr[i],'g');
        	r = r.replace(rg,rpl[i]);
        };
        
        console.log( r );
};

El problema es que la consola imprime en blanco, como si borrara todo el texto. ¿Alguna idea sobre qué puedo estar haciendo mal?

Tengo una función con comportamiento similar en PHP y va muy bien, así que traté de hacer la versión para javascript pero presenta ese problema.

furoya · #2 (**permalink**) 01/07/2012, 07:30

El problema no es la consola, pero vamos a saltearla.

Mira en qué caracter se trula

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
		
function alfa(){
var campo = document.getElementById('campo');

var ltr = ['à','á','â','ã','ä','ç','è','é','ê','ë','ì','í','î','ï','ñ','ò','ó','ô','õ','ö','ù','ú','û','ü','ý','ÿ','À','Á','Â','Ã','Ä','Ç','È','É','Ê','Ë','Ì','Í','Î','Ï','Ñ','Ò','Ó','Ô','Õ','Ö','Ù','Ú','Û','Ü','Ý',' ','-','_',',',':','"',"'",'&',';','@','.','>','<','|'];
var rpl = ['a','a','a','a','a','c','e','e','e','e','i','i','i','i','n','o','o','o','o','o','u','u','u','u','y','y','a','a','a','a','a','c','e','e','e','e','i','i','i','i','n','o','o','o','o','o','u','u','u','u','y','','','','','','','','','','','','','',''];
        
        for (var i = 0, c = ltr.length, r = campo.value.toLowerCase(); i < c; i++)
        {alert(c + "_"+ r +"_"+ i)
        	var rg = new RegExp(ltr[i],'g');alert(rg)
        	r = r.replace(rg,rpl[i]);alert(r)
        };
        
        alert(r);
};
</script>
</head>
<body>
<input id=campo value="éúáñÑìô"><input type=button onclick=alfa()>
</body>
</html>

Aprovecho y dejo otro método con expresiones regulares, que usa las series ASCII. No es método muy conocido, y te ahorra la codificación de los caracteres.

Expresiones regulares

Y hace poco volvimos a tratar esto de comparar caracteres por orden de array, si el tema sigue, lo busco y lo agrego.

junihh · #3 (**permalink**) 01/07/2012, 09:26

Gracias furoya

A partir de tu sugerencia ahora tengo esto:

Código HTML:

boton.onclick = function()
{
        var ltr = ['[àáâãä]','[èéêë]','[ìíîï]','[òóôõö]','[ùúûü]','ñ','ç','[ýÿ]',' ','[\[(){}*+?^$-_,:;"\'&@.<>|]'];
        var rpl = ['a','e','i','o','u','n','c','y','',''];
        
        for (var i = 0, c = ltr.length, r = String(campo.value.toLowerCase()); i < c; i++)
        {
        	var rg = new RegExp(ltr[i],'g');
        	r = r.replace(rg,rpl[i]);
        };
        
        console.log( r );
};

Ahora tengo un caso, si mi texto es:

Código HTML:

áéíóú ñ {OK} (OK) [OK] | 1-2-3-4-5

La consola imprime:

Código HTML:

aeiounokokok

De manera que borra los números. Probé con varias alternativas y no me funciona.

Seguiré probando hasta dar con lo que necesito, porque soy relativamente nuevo con el uso de los regular expressions. Gracias por tu ayuda, me sirvió de mucho.

furoya · #4 (**permalink**) 01/07/2012, 12:47

Y no te conviene más hacer así?

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
var boton, campo;

function carga(){
boton = document.getElementById('boton');
campo = document.getElementById('campo');

boton.onclick = function()
{
        var ltr = ['[à-ä]','[è-ë]','[ì-ï]','[ò-ö]','[ù-ü]','ñ','ç','[ýÿ]','\\s|\\W|_'];
        var rpl = ['a','e','i','o','u','n','c','y',''];
        
        for (var i = 0, c = ltr.length, r = String(campo.value.toLowerCase()); i < c; i++)
        {
                var rg = new RegExp(ltr[i],'g'); //alert(rg)
                r = r.replace(rg,rpl[i]);
        };
        
        console.log( r );
}
}

onload = carga;
</script>

</head>
<body>
<input id=campo value="áâãáéíóú; Ñ {O^K} (O$K) [O,K] | 98_76 1-2-3-4-5" size=100>
<input id=boton type=button value="REEMPLAZAR">
</body>
</html>

Un detalle: el código tal como lo pusiste no está como "cut&paste&test", te lo armé un poco para que lo puedan aprovechar quienes vienen a aprender destripando y probando ejemplos. (Y seguro me lo vas a criticar).

junihh · #5 (**permalink**) 01/07/2012, 14:17

Perfecto, ahora bastante bien. Lo guardé como una función:

Código HTML:

function cleanString (st)
{
        var ltr = ['[àáâãä]','[èéêë]','[ìíîï]','[òóôõö]','[ùúûü]','ñ','ç','[ýÿ]','\\s|\\W|_'];
        var rpl = ['a','e','i','o','u','n','c','y',''];
        var str = String(st.toLowerCase());
        
        for (var i = 0, c = ltr.length; i < c; i++)
        {
        	var rgx = new RegExp(ltr[i],'g');
        	str = str.replace(rgx,rpl[i]);
        };
        
        return str;
};

Ahora conserva los números como debe ser. Hasta que no lea más sobre las combinaciones de RegExp, estaré enganchado en puntos que al final son simples de solucionar.

Prefiero este método "àáâãä" a este "à-ä" porque así puedo ver cuáles carácteres son afectados, por si en otro momento quiero excluir uno en particular.

Nuevamente muchísimas gracias por tu ayuda furoya, me sirvieron de mucho tus sugerencias.

furoya · #6 (**permalink**) 01/07/2012, 19:22

No, de nada.
Eso de las series de caracteres no es tan útil para 4 ó 5, como está en tu RegEx. Lo mostré para aprovechar que estaban escritos. Se usa más para saber —por ejemplo— si hay caracteres hebreos en un párrafo, para cambiar la codificación y la dirección de texto. Como hay casos en que no sabemos qué nos van a escribir en un formulario, metemos todo el alfabeto, o más bien, la primera y la última letra del bloque. Y comparamos.

Lo malo es cuando se mezclan grafías...