Dividir correctamente un string en caracteres. No con string.split("")

Dividir un string en caracteres parece una tarea sencilla, y lo es. mientras un carácter sea solo un carácter.

Como así?

En unicode existen caracteres que se combinan con otros, ejemplo de estos son los caracteres de acento. De esta forma a simple vista un carácter puede parecer un solo símbolo pero estar formado por dos o mas.

Por ejemplo la letra "a" con tilde puede ser un solo carácter (u+00e1), pero puede darse el caso que sea una letra a + una tilde (a+') que son dos caracteres (u+0061 y u+0301 respectivamente).

Esto es un problema, en especial para una aplicación que necesite acceder a cada uno de los caracteres de una palabra como en los crucigramas, ahorcado, sopas de letras, etc.

Por ejemplo en mi juego de sopa de letras a veces las palabras en la cuadricula quedaban en la posición incorrecta. El problema, algunas palabras usaban mas espacio debido a los caracteres de combinación (eje. "mamá" ocupando 5 cuadros = m | a | m | a | ' |).

Que puede salir mal

Para conocer el largo de una cadena de texto normalmente usamos la propiedad length... error, ésta solo da resultados correctos si cada carácter en el texto esta formado por un solo codepoint.

view plainprint?

1. alert("mamá".length)  

alert("mamá".length)

Gracias a un enlace en MDN (Mozilla Developer Network) encontre esta solución.  para obtener el largo correcto del string contamos los caracteres que no son marcas de combinación. a continuación la función (con algunas modificaciones).

view plainprint?

1. // regexp = rangos de caracteres correspondientes a marcas de combinación  
2. rCombiningMarks = /[\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F\u0483-\u0489\u0591-\u05BD]/g;  
3.   
4. function stringLength(string) {  
5.     // iniciar un contador de caracteres en 0  
6.     var length = 0;  
7.       
8.     // por cada caracter en string  
9.     for (var i = 0, l = string.length; i < l; i++) {  
10.         // si no es una marca de combinación  
11.         if (! rCombiningMarks.test(string.charAt(i)) )  
12.             // incrementar el contador de caracteres  
13.             length += 1  
14.     }  
15.       
16.     return length;  
17. }  

// regexp = rangos de caracteres correspondientes a marcas de combinación
rCombiningMarks = /[\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F\u0483-\u0489\u0591-\u05BD]/g;

function stringLength(string) {
    // iniciar un contador de caracteres en 0
    var length = 0;
    
    // por cada caracter en string
    for (var i = 0, l = string.length; i < l; i++) {
        // si no es una marca de combinación
        if (! rCombiningMarks.test(string.charAt(i)) )
            // incrementar el contador de caracteres
            length += 1
    }
    
    return length;
}

Probamos nuestra función.

view plainprint?

1. alert(stringLength("mamá"));  

alert(stringLength("mamá"));

Como dividir un string?

Podemos usar un método similar al anterior para dividir un string:

view plainprint?

1. // regexp = rangos de caracteres correspondientes a marcas de combinación  
2. rCombiningMarks = /[\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F\u0483-\u0489\u0591-\u05BD]/g;  
3.   
4. function splitString(string) {  
5.     // iniciar un array de caracteres  
6.     var chars = [],  
7.         lastChar;  
8.       
9.     // por cada caracter en string  
10.     for (var i = 0, l = string.length; i < l; i++) {  
11.         // si no es una marca de cominación  
12.         if (! rCombiningMarks.test(string.charAt(i)) ) {  
13.             // Agregar al array de caracteres  
14.             chars.push(string.charAt(i));  
15.         }  
16.         // de lo contrario  
17.         else {  
18.             // Concatenar con ultimo caracter en el array  
19.             var lastChar = chars[chars.length - 1];  
20.             chars[chars.length - 1] = lastChar + string.charAt(i);  
21.         }  
22.     }  
23.       
24.     return chars;  
25. }  
26.   
27. // TEST  
28. alert("con string.split: "+("mamá".split("").join(" | ")));  
29. alert("con splitString: " + splitString("mama").join(" | "));  

// regexp = rangos de caracteres correspondientes a marcas de combinación
rCombiningMarks = /[\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F\u0483-\u0489\u0591-\u05BD]/g;

function splitString(string) {
    // iniciar un array de caracteres
    var chars = [],
        lastChar;
    
    // por cada caracter en string
    for (var i = 0, l = string.length; i < l; i++) {
        // si no es una marca de cominación
        if (! rCombiningMarks.test(string.charAt(i)) ) {
            // Agregar al array de caracteres
            chars.push(string.charAt(i));
        }
        // de lo contrario
        else {
            // Concatenar con ultimo caracter en el array
            var lastChar = chars[chars.length - 1];
            chars[chars.length - 1] = lastChar + string.charAt(i);
        }
    }
    
    return chars;
}

// TEST
alert("con string.split: "+("mamá".split("").join(" | ")));
alert("con splitString: " + splitString("mama").join(" | "));

Conclusión

Aun cuando javascript nos provee varios métodos útiles para el manejo de strings, números, arrays y objetos, estos no siempre nos darán los resultados deseados. debemos probar nuestro código para estar seguros que se comporta de la forma correcta.

Algún otro método/función nativa de javascript de la que no hay que confiar. Déjalo en los comentarios.

Suscríbete y mantente informado de los últimos artículos