Capitalizar palabras en cadena

¿Cuál es el mejor enfoque para capitalizar palabras en una cadena?

/**
 * Capitalizes first letters of words in string.
 * @param {string} str String to be modified
 * @param {boolean=false} lower Whether all other letters should be lowercased
 * @return {string}
 * @usage
 *   capitalize('fix this string');     // -> 'Fix This String'
 *   capitalize('javaSCrIPT');          // -> 'JavaSCrIPT'
 *   capitalize('javaSCrIPT', true);    // -> 'Javascript'
 */
const capitalize = (str, lower = false) =>
  (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());
;

• corrige la solución de Marco Demaio donde la primera letra con un espacio anterior no está en mayúscula.

capitalize(' javascript'); // -> ' Javascript'

• puede manejar símbolos nacionales y letras acentuadas.

capitalize('бабушка курит трубку');  // -> 'Бабушка Курит Трубку'
capitalize('località àtilacol')      // -> 'Località Àtilacol'

• puede manejar citas y llaves.

capitalize(`"quotes" 'and' (braces) {braces} [braces]`);  // -> "Quotes" 'And' (Braces) {Braces} [Braces]

La implementación más corta para capitalizar palabras dentro de una cadena es la siguiente usando las funciones de flecha 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 básicamente 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 principio o el final de la palabra);
• \ w coincide con el siguiente meta-carácter [a-zA-Z0-9].

Para caracteres no ASCII, consulte esta solución en su lugar

'ÿöur striñg'.replace(/(^|\s)\S/g, l => l.toUpperCase())

Esta expresión regular coincide con la primera letra y todas las letras que no son espacios en blanco precedidas por espacios en blanco dentro de la cadena dada y transforma solo esa letra en mayúsculas:

• \ s coincide con un carácter de espacio en blanco
• \ S coincide con un carácter que no es un espacio en blanco
• (x | y) coincide con cualquiera de las alternativas especificadas

Un grupo no capturador podría haberse utilizado aquí de la siguiente manera, /(?:^|\s)\S/gaunqueg bandera dentro de nuestra expresión regular no capturará subgrupos por diseño de todos modos.

¡Salud!

function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');

salida: "Esta es la peor cadena de la historia"

Actualizar:

Parece que esta solución reemplaza a la mía: https://stackoverflow.com/a/7592235/104380

La respuesta proporcionada por vsync funciona siempre que no tenga letras acentuadas en la cadena de entrada.

No sé la razón, pero aparentemente las \bcoincidencias en regexp también coinciden con letras acentuadas (probadas en IE8 y Chrome), por lo que una cadena como "località"se capitalizaría erróneamente convertida en"LocalitÀ" (la àletra se capitaliza porque la expresión regular piensa que es un límite de palabra)

Una función más general que funciona también con letras acentuadas es esta:

String.prototype.toCapitalize = function()
{ 
   return this.toLowerCase().replace(/^.|\s\S/g, function(a) { return a.toUpperCase(); });
}

Puedes usarlo así:

alert( "hello località".toCapitalize() );

Como todos le han dado la respuesta de JavaScript que solicitó, agregaré la propiedad CSS text-transform: capitalize hará exactamente esto.

Me doy cuenta de que esto podría no ser lo que estás pidiendo, no nos has dado nada del contexto en el que estás ejecutando esto, pero si es solo para una presentación, definitivamente elegiría la alternativa CSS.

John Resig (de jQuery fame) portó un script en perl, escrito por John Gruber, a JavaScript. Este script capitaliza de una manera más inteligente, no capitaliza palabras pequeñas como 'de' y 'y' por ejemplo.

Puede encontrarlo aquí: Capitalización de títulos en JavaScript

Usando JavaScript y HTML

String.prototype.capitalize = function() {
  return this.replace(/(^|\s)([a-z])/g, function(m, p1, p2) {
    return p1 + p2.toUpperCase();
  });
};

<form name="form1" method="post">
  <input name="instring" type="text" value="this is the text string" size="30">
  <input type="button" name="Capitalize" value="Capitalize >>" onclick="form1.outstring.value=form1.instring.value.capitalize();">
  <input name="outstring" type="text" value="" size="30">
</form>

Básicamente, puedes hacer string.capitalize() y capitalizará cada 1ra letra de cada palabra.

Fuente: http://www.mediacollege.com/internet/javascript/text/case-capitalize.html

La respuesta de Ivo es buena, pero prefiero no coincidir \wporque no hay necesidad de capitalizar 0-9 y AZ. Podemos ignorarlos y solo coincidir en az.

'your string'.replace(/\b[a-z]/g, match => match.toUpperCase())
// => 'Your String'

Es el mismo resultado, pero creo que más claro en términos de código autodocumentado.

Si está usando lodash en su aplicación JavaScript, puede usar _.capitalize :

console.log( _.capitalize('ÿöur striñg') );
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

Una forma concisa de hacerlo en ES6 podría verse así.

const capitalizeFirstLetter = s => s.charAt(0).toUpperCase() + s.slice(1)

Esto solo pone en mayúscula la primera letra y no afecta el resto de la carcasa de la oración.

Mi solución:

String.prototype.toCapital = function () {
    return this.toLowerCase().split(' ').map(function (i) {
        if (i.length > 2) {
            return i.charAt(0).toUpperCase() + i.substr(1);
        }

        return i;
    }).join(' ');
};

Ejemplo:

'álL riGht'.toCapital();
// Returns 'Áll Right'

Esto debería cubrir la mayoría de los casos de uso básicos.

const capitalize = (str) => {
    if (typeof str !== 'string') {
      throw Error('Feed me string')
    } else if (!str) {
      return ''
    } else {
      return str
        .split(' ')
        .map(s => {
            if (s.length == 1 ) {
                return s.toUpperCase()
            } else {
                const firstLetter = s.split('')[0].toUpperCase()
                const restOfStr = s.substr(1, s.length).toLowerCase()
                return firstLetter + restOfStr
            }     
        })
        .join(' ')
    }
}


capitalize('THIS IS A BOOK') // => This Is A Book
capitalize('this is a book') // => This Is A Book
capitalize('a 2nd 5 hour boOk thIs weEk') // => A 2nd 5 Hour Book This Week

Editar: Legibilidad mejorada de mapeo.

Esta solución no utiliza expresiones regulares, admite caracteres acentuados y también es compatible con casi todos los navegadores.

function capitalizeIt(str) {
    if (str && typeof(str) === "string") {
        str = str.split(" ");    
        for (var i = 0, x = str.length; i < x; i++) {
            if (str[i]) {
                str[i] = str[i][0].toUpperCase() + str[i].substr(1);
            }
        }
        return str.join(" ");
    } else {
        return str;
    }
}    

Uso:

console.log (capitalizeIt ('çao 2nd dentro del programa Javascript'));

Salida:

Çao 2nd Inside Javascript Program

http://www.mediacollege.com/internet/javascript/text/case-capitalize.html es una de las muchas respuestas disponibles.

Google puede ser todo lo que necesita para tales problemas.

Un enfoque ingenuo sería dividir la cadena por espacios en blanco, poner en mayúscula la primera letra de cada elemento de la matriz resultante y unirla nuevamente. Esto deja solo las mayúsculas existentes (por ejemplo, HTML sigue siendo HTML y no se convierte en algo tonto como Html). Si no desea ese efecto, convierta toda la cadena en minúsculas antes de dividirla.

Este código capitaliza las palabras después del punto:

function capitalizeAfterPeriod(input) { 
    var text = '';
    var str = $(input).val();
    text = convert(str.toLowerCase().split('. ')).join('. ');
    var textoFormatado = convert(text.split('.')).join('.');
    $(input).val(textoFormatado);
}

function convert(str) {
   for(var i = 0; i < str.length; i++){
      str[i] = str[i].split('');
      if (str[i][0] !== undefined) {
         str[i][0] = str[i][0].toUpperCase();
      }
      str[i] = str[i].join('');
   }
   return str;
}

Me gusta ir con un proceso fácil. Primero cambie la cadena a Array para una iteración fácil, luego, usando la función de mapa, cambie cada palabra como desee.

function capitalizeCase(str) {
    var arr = str.split(' ');
    var t;
    var newt;
    var newarr = arr.map(function(d){
        t = d.split('');
        newt = t.map(function(d, i){
                  if(i === 0) {
                     return d.toUpperCase();
                    }
                 return d.toLowerCase();
               });
        return newt.join('');
      });
    var s = newarr.join(' ');
    return s;
  }

Jquery o Javascipt no proporcionan un método integrado para lograr esto.

La transformación de prueba CSS (text-transform: capitalize;) realmente no capitaliza los datos de la cadena, pero muestra una representación en mayúscula en la pantalla.

Si está buscando una forma más legítima de lograr esto en el nivel de datos usando vanillaJS simple, use esta solución =>

var capitalizeString = function (word) {    
    word = word.toLowerCase();
    if (word.indexOf(" ") != -1) { // passed param contains 1 + words
        word = word.replace(/\s/g, "--");
        var result = $.camelCase("-" + word);
        return result.replace(/-/g, " ");
    } else {
    return $.camelCase("-" + word);
    }
}

Utilizar este:

String.prototype.toTitleCase = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
}

let str = 'text';
document.querySelector('#demo').innerText = str.toTitleCase();

<div class = "app">
  <p id = "demo"></p>
</div>

Puede usar lo siguiente para poner en mayúscula las palabras en una cadena:

function capitalizeAll(str){

    var partes = str.split(' ');

    var nuevoStr = ""; 

    for(i=0; i<partes.length; i++){
    nuevoStr += " "+partes[i].toLowerCase().replace(/\b\w/g, l => l.toUpperCase()).trim(); 
    }    

    return nuevoStr;

}

También hay locutus: https://locutus.io/php/strings/ucwords/ que lo define de esta manera:

function ucwords(str) {
  //  discuss at: http://locutus.io/php/ucwords/
  // original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  // improved by: Waldo Malqui Silva (http://waldo.malqui.info)
  // improved by: Robin
  // improved by: Kevin van Zonneveld (http://kvz.io)
  // bugfixed by: Onno Marsman (https://twitter.com/onnomarsman)
  // bugfixed by: Cetvertacov Alexandr (https://github.com/cetver)
  //    input by: James (http://www.james-bell.co.uk/)
  //   example 1: ucwords('kevin van  zonneveld')
  //   returns 1: 'Kevin Van  Zonneveld'
  //   example 2: ucwords('HELLO WORLD')
  //   returns 2: 'HELLO WORLD'
  //   example 3: ucwords('у мэри был маленький ягненок и она его очень любила')
  //   returns 3: 'У Мэри Был Маленький Ягненок И Она Его Очень Любила'
  //   example 4: ucwords('τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός')
  //   returns 4: 'Τάχιστη Αλώπηξ Βαφής Ψημένη Γη, Δρασκελίζει Υπέρ Νωθρού Κυνός'

  return (str + '').replace(/^(.)|\s+(.)/g, function ($1) {
    return $1.toUpperCase();
  });
};

Yo usaría regex para este propósito:

myString = '  this Is my sTring.  ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));