Primera letra mayúscula de variable

Respuestas:

227

Utilice la función .replace[MDN] para reemplazar las letras minúsculas que comienzan una palabra con la letra mayúscula.

var str = "hello world";
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
alert(str); //Displays "Hello World"


Editar: si está tratando con caracteres de palabras que no sean simplemente az, entonces la siguiente expresión regular (más complicada) podría adaptarse mejor a sus propósitos.

var str = "петр данилович björn über ñaque αλφα";
str = str.toLowerCase().replace(/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g, function(letter) {
    return letter.toUpperCase();
});
alert(str); //Displays "Петр Данилович Björn Über Ñaque Αλφα"

Peter Olson
fuente
1
Esto no funciona con nombres como Björn Lüchinger, esto se convierte en BjöRn LüChinger. ¿Alguna solución para esto?
Dedicado el
2
@Dediqated Gracias por señalar eso, avíseme si la edición ayuda.
Peter Olson
¡Funciona genial! ¿Alguna sugerencia sobre cuál debería ser la modificación si solo quisiera convertir a mayúsculas el primer carácter de la cadena? (en lugar de cada palabra)
Andres SK
6
@andufo Seguro, en realidad es mucho más sencillo de hacer. Solo usestr[0].toUpperCase() + str.slice(1)
Peter Olson
@PeterOlson ¡gracias por la respuesta! También terminé usando var first = str.slice(0, str.indexOf(' ')); str = first.toLowerCase().replace(/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g, function(letter) { return letter.toUpperCase(); }) + str.substr(first.length);para cubrir caracteres especiales.
Andres SK
72

Manera mucho más fácil:

$('#test').css('textTransform', 'capitalize');

Tengo que darle algo de crédito a @Dementic por haberme guiado por el camino correcto. Mucho más simple de lo que están proponiendo.

vbullinger
fuente
32
Esto solo cambia la representación visual de la cadena y no el valor de la cadena en sí.
toxaq
1
Sin embargo, no puede aplicar esto a las variables obtenidas de la base de datos, pero para otros instantes este método es muy limpio
Armand
3
Nota: text-transform:capitalizeno afectará TODAS LAS MAYÚSCULAS.
Bob Stein
1
¿Qué pasa si la cadena (variable) debe usarse para alguna operación que no sea simplemente mostrar?
Viernes
tenga en cuenta que guardará la entrada con mayúsculas, solo la convertirá en la vista
Sherif Elkassa por
25

http://phpjs.org/functions/ucwords:569 tiene un buen ejemplo

function ucwords (str) {
    return (str + '').replace(/^([a-z])|\s+([a-z])/g, function ($1) {
        return $1.toUpperCase();
    });
}

(comentario de función omitido de la fuente para mayor brevedad. Consulte la fuente vinculada para obtener más detalles)

EDITAR: tenga en cuenta que esta función pone en mayúsculas la primera letra de cada palabra (como lo pide su pregunta) y no solo la primera letra de una cadena (como lo pide el título de su pregunta)

Jonathan Fingland
fuente
Esto funciona mejor que la solución aceptada que pone en mayúsculas las palabras en una oración después del apóstrofe, por ejemplo, "Soy un ejemplo" se convierte en "Soy un ejemplo"
lizardhr
No funciona si tiene un guión bajo en su cadena original, agréguelo a su REGEX para un mejor rendimiento. TY
Ruslan Abuzant
1
@RuslanAbuzant Eso sería responder a una pregunta diferente. Interpretar un guión bajo como un separador de palabras (o un espacio en blanco general) está bien, pero no es lo que OP estaba pidiendo ... e incluso podría romper su caso de uso.
Jonathan Fingland
1
ucwords () apesta. No funciona con Unicode (particularmente con alfabetos cirílico, griego y otros alfabetos de Europa central). Es mejor utilizar mb_convert_case () en el back-end, por ejemplo: mb_convert_case ($ _ POST ['nombre'], MB_CASE_TITLE, 'utf-8');
Aleksey Kuznetsov
14

solo quería agregar una solución javascript pura (sin JQuery)

function capitalize(str) {
  strVal = '';
  str = str.split(' ');
  for (var chr = 0; chr < str.length; chr++) {
    strVal += str[chr].substring(0, 1).toUpperCase() + str[chr].substring(1, str[chr].length) + ' '
  }
  return strVal
}

console.log(capitalize('hello world'));

Rafael Herscovici
fuente
1
gracias hermano, solo quiero corregir algo. esto c < str.length;debería serchr < str.length;
Leysam Rosario
13

Me imagino que podría usar substring () y toUpperCase () para extraer el primer carácter, ponerlo en mayúsculas y luego reemplazar el primer carácter de su cadena con el resultado.

myString = "cheeseburger";
firstChar = myString.substring( 0, 1 ); // == "c"
firstChar.toUpperCase();
tail = myString.substring( 1 ); // == "heeseburger"
myString = firstChar + tail; // myString == "Cheeseburger"

Creo que eso debería funcionar para ti. Otra cosa a considerar es que si se muestran estos datos, puede agregar una clase a su contenedor que tenga la propiedad CSS "text-transform: capitalize".

Fudgie
fuente
¿No debería haber como firstChar = firstChar.toUpperCase (); ? Probé el código en Node.js y tuve que hacer eso o no cambió nada.
Adrian Adaine
9

Para hacer esto, ni siquiera necesita Javascript si va a utilizar

$('#test').css('textTransform', 'capitalize');

¿Por qué no hacer esto como CSS?

#test,h1,h2,h3 { text-transform: capitalize; }

o hazlo como una clase y aplica esa clase donde sea que la necesites

.ucwords { text-transform: capitalize; }
Bruce Smith
fuente
4
Bienvenido a Stackoverflow. Su respuesta sugiere una alternativa (que podría ser perfectamente válida en algunos casos de uso), pero realmente no responde a la pregunta. Como entendí la pregunta, el autor quería transformar realmente la variable de Javascript, y no solo su representación visual.
helmbert
3
Sí, pero otras personas que respondan a esta pregunta podrían estar de acuerdo con las respuestas de javascript O CSS, como yo, y esto fue realmente útil ...
Brian Powell
6

¿Has oído hablar alguna vez substr()?

Para empezar:

$("#test").text($("#test").text().substr(0,1).toUpperCase()+$("#test").text().substr(1,$("#test").text().length));


[Actualizar:]

Gracias a @FelixKling por el consejo:

$("#test").text(function(i, text) {
    return text.substr(0,1).toUpperCase() + text.substr(1);
});
Cifrar
fuente
4
En lugar de llamar text() cuatro veces, pase una función a text():$("#test").text(function(i, text) { return text.substr(0,1).toUpperCase()+text.substr(1);});
Felix Kling
1
desenterrando cuerpos viejos aquí, pero si se supiera que el contenido entra en un elemento, sería mucho más fácil de usar:$('#test').style.textTransform='capitalize';
Rafael Herscovici
Cerca, @Dementic, pero debería ser: $('#test').css('textTransform', 'capitalize'); Por cierto, esta es la mejor respuesta aquí. Lo enviaré como respuesta.
vbullinger
@vbullinger: no juzgues mi código cuando lo escribo borracho como el infierno :) y amo js, ​​no jq, así que mi código es incorrecto, pero no demasiadodocument.getElementById('test').style.textTransform='capitalize';
Rafael Herscovici
5

Sobre la base de la respuesta de @ peter-olson, tomé un enfoque más orientado a objetos sin jQuery:

String.prototype.ucwords = function() {
    return this.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });
}

alert("hello world".ucwords()); //Displays "Hello World"

Ejemplo: http://jsfiddle.net/LzaYH/1/

mmalone
fuente
Esta es realmente la forma más adecuada, en mi opinión. Lo llamaría toUpperCaseWordsde acuerdo con javascript toUpperCase()ytoLowerCase()
AB Carroll
4
var mystring = "hello World"
mystring = mystring.substring(0,1).toUpperCase() + 
mystring.substring(1,mystring.length)

console.log(mystring) //gives you Hello World
Nick Chan Abdullah
fuente
4

Manera más simple

let str="hiren raiyani"
str.toLowerCase().replace(/(?<= )[^\s]|^./g, a => a.toUpperCase());

función definida por el usuario:

function capitalize(str){
 return str.toLowerCase().replace(/(?<= )[^\s]|^./g, a => a.toUpperCase());
}

salida: Hiren Raiyani

Utilice el código como su función definida por el usuario o directamente

Hiren Raiyani
fuente
3
var ar = 'foo bar spam egg'.split(/\W/);
for(var i=0; i<ar.length; i++) {
  ar[i] = ar[i].substr(0,1).toUpperCase() + ar[i].substr(1,ar[i].length-1) 
}
ar.join(' '); // Foo Bar Spam Egg
erickb
fuente
3

Puede probar este código simple con las características de ucwords en PHP.

function ucWords(text) {
    return text.split(' ').map((txt) => (txt.substring(0, 1).toUpperCase() + txt.substring(1, txt.length))).join(' ');
}
ucWords('hello WORLD');

Mantendrá los casos superiores sin cambios.

IamMHussain
fuente
3

Es tan simple como lo siguiente:

string = 'test';
newString = string[0].toUpperCase() + string.slice(1);
alert(newString);
Sol
fuente
2

Basado completamente en la respuesta de @Dementric, esta solución está lista para llamar con un método simple de jQuery, 'ucwords' ... ¡¡¡Gracias a todos los que contribuyeron aquí !!!

$.extend({
ucwords : function(str) {
    strVal = '';
    str = str.split(' ');
    for (var chr = 0; chr < str.length; chr++) {
        strVal += str[chr].substring(0, 1).toUpperCase() + str[chr].substring(1, str[chr].length) + ' '
    }
    return strVal
}

});

EJEMPLO: Esto se puede llamar usando el método

var string = "this is a test";
string = $.ucwords(string); // Returns "This Is A Test"
JoomGuy
fuente
2

Puede utilizar text-transform: capitalize;para este trabajo:

HTML -

<input type="text" style="text-transform: capitalize;" />

JQuery -

$(document).ready(function (){
   var asdf = "WERTY UIOP";
   $('input').val(asdf.toLowerCase());
});

Prueba esto

Nota: Solo cambia la representación visual de la cadena. Si alerta a esta cadena, siempre mostrará el valor original de la cadena.

Ishan Jain
fuente
0

La cadena para bajar antes de poner en mayúscula la primera letra.

(Ambos usan la sintaxis de Jquery)

function CapitaliseFirstLetter(elementId) {
    var txt = $("#" + elementId).val().toLowerCase();
    $("#" + elementId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
    return $1.toUpperCase(); }));
    }

Además, una función para poner en mayúscula TODA la cadena:

function CapitaliseAllText(elementId) {
     var txt = $("#" + elementId).val();
     $("#" + elementId).val(txt.toUpperCase());
     }

Sintaxis para usar en el evento de clic de un cuadro de texto:

onClick="CapitaliseFirstLetter('TextId'); return false"
Rubyist
fuente
0

He usado este código -

function ucword(str){
    str = str.toLowerCase().replace(/(^([a-zA-Z\p{M}]))|([ -][a-zA-Z\p{M}])/g, function(replace_latter) { 
        return replace_latter.toUpperCase();
    });  //Can use also /\b[a-z]/g
    return str;  //First letter capital in each word
}

var uc = ucword("good morning. how are you?");
alert(uc);
Chinmay235
fuente
0

HTML:

<input class="capitalize" name="Address" type="text" value="" />

Javascript con jQuery:

$(".capitalize").bind("keyup change", function (e) {
        if ($(this).val().length == 1)
            $(this).val($(this).val().toUpperCase());
        $(this).val($(this).val().toLowerCase().replace(/\s[\p{L}a-z]/g, function (letter) {
            return letter.toUpperCase();
        }))
    });
Robert Benyi
fuente
0

Sin JQuery

String.prototype.ucwords = function() {
    str = this.trim();
    return str.replace(/(^([a-zA-Z\p{M}]))|([ -][a-zA-Z\p{M}])/g, function(s){
        return s.toUpperCase();
    });
};

console.log('hello world'.ucwords()); // Display Hello World
GerardMetal
fuente
0

 var str = "HELLO WORLD HELLO WORLD HELLO WORLD HELLO WORLD";
         str = str.replace(
                        /([A-Z])([A-Z]+)/g,
        				function (a, w1, w2) {
                            return w1 + w2.toLowerCase();
                        });
alert(str);

Rock
fuente
0

Aquí está la función ucwords () segura para Unicode, que además respeta los apellidos dobles como el ruso Засс-Ранцев y algunos nombres nobles como Honoré de Balzac, d'Artagnan, Vincent van Gogh, Otto von Bismarck, Sulaymān ibn Dāwūd, etc.

String.prototype.ucwords = function() {
  return this.toLowerCase()
    .replace(/(^|\s|\-)[^\s$]/g, function(m) {
       return m.toUpperCase();
    })
    // French, Arabic and some noble names...
    .replace(/\s(Of|De|Van|Von|Ibn|Из|Ван|Фон|Ибн)\s/g, function(m) { // Honoré de Balzac, Vincent van Gogh, Otto von Bismarck, Sulaymān ibn Dāwūd etc.
       return m.toLowerCase();
    })
    .replace(/(^|\s)(D|Д)(['’][^\s$])/g, function(m, p1, p2, p3) { // D'Artagnan or d'Artagnan / Д’Артаньян или д’Артаньян
       return p1 + (p1 === "" ? p2/*.toUpperCase()*/ : p2.toLowerCase()) + p3.toUpperCase();
    });
}
Aleksey Kuznetsov
fuente
0

La forma más fácil de poner la primera letra en mayúscula en JS

var string = "made in india";

string =string .toLowerCase().replace(/\b[a-z]/g, function(letter){return  letter.toUpperCase();});

alert(string );

Resultado: "Hecho en India"

Amor Kumar
fuente