Hagamos una solución en castellano con expresiones regulares.
Sobre las letras del español:
Para las expresiones regulares en JavaScript, la ñ
y los acentos no son caracteres de palabra1.
1: No están incluidos en \w
, y por ende \b
los toma mal
En JavaScript2, tenemos que hacer que coincida con el caracter previo (o el inicio del string) e incluirlo en el reemplazo, seguido de una letra en minúsculas.
2: Porque en JavaScript no hay inspecciones hacia atrás (lookbehinds), como sí hay en otros dialectos de regex.
Para capitalizar las minúsculas al inicio de cada palabra:
const re = /(^|[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ])([a-záéíóúüñ])/g;
texto.replace(re, function(match, caracterPrevio, minuscula) {
return caracterPrevio + minuscula.toLocaleUpperCase(['es', 'gl', 'ca', 'pt', 'en']);
});
Y, además, podemos llevar a minúsculas todo el resto, haciendo:
- que tambíen coincida con mayúsculas iniciales (para no reemplazar),
- y con mayúsculas intermedias (para llevar a minúsculas).
Solución:
function titleCase(texto) {
const re = /(^|[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ])(?:([a-záéíóúüñ])|([A-ZÁÉÍÓÚÜÑ]))|([A-ZÁÉÍÓÚÜÑ]+)/gu;
return texto.replace(re,
(m, caracterPrevio, minuscInicial, mayuscInicial, mayuscIntermedias) => {
const locale = ['es', 'gl', 'ca', 'pt', 'en'];
if (mayuscIntermedias)
return mayuscIntermedias.toLocaleLowerCase(locale);
return caracterPrevio
+ (minuscInicial ? minuscInicial.toLocaleUpperCase(locale) : mayuscInicial);
}
);
}
Descripción:
/(^|[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ])(?:([a-záéíóúüñ])|([A-ZÁÉÍÓÚÜÑ]))|([A-ZÁÉÍÓÚÜÑ]+)/gu
Son 2 alternativas en un OR: /1|2/gu
(^|[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ])(?:([a-záéíóúüñ])|([A-ZÁÉÍÓÚÜÑ]))
- LETRA INICIAL.
(^|[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ])
- Inicio del texto o cualquier caracter que no sea alfabético.
Es el primer grupo => se pasa al callback en la variable caracterPrevio
.
(?:([a-záéíóúüñ])|([A-ZÁÉÍÓÚÜÑ]))
- La primera letra de la palabra, ya sea:
([a-záéíóúüñ])
- letra en minúscula => se pasa como la variable minuscInicial
, o
([A-ZÁÉÍÓÚÜÑ])
- letra en mayúscula => se pasa como la variable mayuscInicial
.
([A-ZÁÉÍÓÚÜÑ]+)
- MAYÚSCULAS INTERMEDIAS
Cuando coincide con esta parte, significa que no coincidió con la primera. Por lo tanto, sabemos que no es una letra al inicio de una palabra, sino una letra intermedia.
[A-ZÁÉÍÓÚÜÑ]+
coincide con 1 o más letras en mayúsculas (no iniciales), de modo que podemos llevarlas a minúsculas.
Es el cuarto grupo => se pasa como la variable mayuscIntermedias
.
Demo:
//Leva a mayúsculas la primera letra de cada palabra
function titleCase(texto) {
const re = /(^|[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ])(?:([a-záéíóúüñ])|([A-ZÁÉÍÓÚÜÑ]))|([A-ZÁÉÍÓÚÜÑ]+)/gu;
return texto.replace(re,
(m, caracterPrevio, minuscInicial, mayuscInicial, mayuscIntermedias) => {
const locale = ['es', 'gl', 'ca', 'pt', 'en'];
//Son letras mayúsculas en el medio de la palabra
// => llevar a minúsculas.
if (mayuscIntermedias)
return mayuscIntermedias.toLocaleLowerCase(locale);
//Es la letra inicial de la palabra
// => dejar el caracter previo como está.
// => si la primera letra es minúscula, capitalizar
// sino, dejar como está.
return caracterPrevio
+ (minuscInicial ? minuscInicial.toLocaleUpperCase(locale) : mayuscInicial);
}
);
}
//Evento para mostrar el resultado cada vez que se ingresa un caracter
document.getElementById('ingreso')
.addEventListener('input',
event => {
document.getElementById('resultado')
.innerText = titleCase(event.target.value);
}
);
<input type="text"
id="ingreso"
placeholder="Escribí texto para llevar a mayúsculas la primera letra de cada palabra"
style="width:100%">
<pre id="resultado">