4

El caso es que tengo este código y solo me convierte la primera letra. El caso es que yo quiero que me convierta las primeras letras de cada palabra y no se como hacerlo.

    document.write("Nombre y apellidos<input type='text' id='datos'><br>");
    document.write("<input type='button' value='Convertir' onclick='mostrarPalabra()'><br>");

    function mostrarPalabra() {
        var datos = document.getElementById('datos').value;
        datos = convertir(datos.toLowerCase());
        console.log(datos);
    }

    function convertir(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
1
  • 1
    Te puedo ayudar una pregunta que hice hace tiempo relacionada: enlace.
    – dddenis
    Commented el 21 oct. 2017 a las 21:15

5 respuestas 5

6

La implementación más corta para capitalizar palabras dentro de una cadena es la siguiente utilizando las funciones Arrow de ES6:

'your string'.replace(/\b\w/g, l => l.toUpperCase())
// => 'Your String'

Implementación compatible con ES5:

'your string'.replace(/\b\w/g, function(l){ return l.toUpperCase() })
// => 'Your String'

La expresión regular coincide con la primera letra de cada palabra dentro de la cadena dada y transforma solo esa letra en mayúscula:

\ b coincide con un límite de palabra (el comienzo o el final de la palabra);
\ w coincide con el siguiente metacaracteres [a-zA-Z0-9].

1
  • 3
    Buena respuesta. Quizás convenga cambiar \w por [a-z], para que no esté llevando a mayúsculas letras que ya están en mayúsculas o números... Y vale aclarar que no funciona con ñ ni acentos
    – Mariano
    Commented el 22 oct. 2017 a las 11:24
4

Viendo las respuesta dada, te daré una solución sin usar regex.

Características de la función:

  • Puedes pasar una sola palabra o una cadena completa
  • Respeta los tildes y los diéresis
  • No usamos regex

function capitalizarPalabras( val ) {
  
  return val.toLowerCase()
            .trim()
            .split(' ')
            .map( v => v[0].toUpperCase() + v.substr(1) )
            .join(' ');  
}

console.log( capitalizarPalabras( 'hola' ) );
console.log( capitalizarPalabras( ' hola' ) ); // Empieza con un espacio
console.log( capitalizarPalabras( 'hola mundo ' ) );
console.log( capitalizarPalabras( 'ñoño óle' ) );
console.log( capitalizarPalabras( '1 ñoño óle' ) );
console.log( capitalizarPalabras( ' über öll mi au' ) );
console.log( capitalizarPalabras( 'algun texto sin sentido. y este aún menos. ' ) );

2
  • Normalmente me gustan las soluciones simples (por naturaleza y porque las puede entender alguien que recién empieza), pero en este caso en particular creo que hay que aclarar que funciona sólo si la letra está después de un espacio. Ejemplo donde no funcionaría: ¿no te parece? -digo nomás.
    – Mariano
    Commented el 23 nov. 2017 a las 2:31
  • 1
    @Mariano - Aunque no te lo creas, estaba esperando tu comentario (ya conociendo te un poco por las obsesiones) :))) y te adelanto ya... con más de 2 espacios entre palabras no va a funcionar... pero por lo general sería una opción ...(espero que no encuentres otro escenario) ;) Commented el 23 nov. 2017 a las 12:41
2

Usando, replace(), expresiones regulares y funciones flecha de ES6

console.log('kdz stack overflow'.replace(/\b[a-z]/g,c=>c.toUpperCase()));

1
  • No funciona bien cuanto hay mayúsculas Commented el 8 ene. 2020 a las 18:19
1

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

  1. (^|[^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.
  2. ([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">

0
const first_letter_uppercase_word = str => {
  return str.toLowerCase().replace(/\b[a-z]/g, c => c.toUpperCase())
}

first_letter_uppercase_word("HELLO worlD")

Example: Hello World

1
  • Hola. Gracias por la respuesta, genial que respondas todo lo que veas en donde se puede aportar... Un pequeño comentario nomás: ¿no es exactamente la misma respuesta que lo que ya respondió Eduardo Sebastian antes? Y, por otro lado, siempre es bueno intentar explicar el código. Por más que sea una línea, hay que tener en cuenta a gente que no entienda lo que hace el replace() o qué es un límite de palabra \b o cómo es que cada coincidencia se evalúa con el callback
    – Pollo
    Commented el 11 oct. 2020 a las 19:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.