Prima lettera maiuscola della variabile


Risposte:


227

Utilizzare la funzione .replace[MDN] per sostituire le lettere minuscole che iniziano una parola con la lettera maiuscola.

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


Modifica: se hai a che fare con caratteri alfanumerici diversi da az, la seguente espressione regolare (più complicata) potrebbe adattarsi meglio ai tuoi scopi.

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 Αλφα"


1
Questo non funziona con nomi come Björn Lüchinger, questo diventa BjöRn LüChinger. Qualche soluzione per questo?
Dediqated

2
@Dediqated Grazie per averlo sottolineato, fammi sapere se la modifica aiuta.
Peter Olson

Funziona alla grande! Qualche suggerimento su quale dovrebbe essere la modifica se volessi solo convertire in maiuscolo il primo carattere della stringa? (invece di ogni singola parola)
Andres SK

6
@andufo Certo, in realtà è molto più semplice da fare. Basta usarestr[0].toUpperCase() + str.slice(1)
Peter Olson

@PeterOlson grazie per la risposta! Ho finito di usare anche 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);per coprire caratteri speciali.
Andres SK

72

Modo molto più semplice:

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

Devo dare a @Dementic un po 'di merito per avermi guidato sulla giusta strada. Molto più semplice di qualunque cosa stiate proponendo.


32
Questo cambia solo la rappresentazione visiva della stringa e non il valore della stringa stesso.
toxaq

1
Tuttavia, non è possibile applicarlo alle variabili recuperate da DB, ma per altre istanze questo metodo è molto pulito
Armand

3
Nota: text-transform:capitalizenon avrà effetto TUTTO MAIUSCOLO.
Bob Stein,

1
Cosa succede se la stringa (variabile) deve essere utilizzata per qualche operazione diversa dalla semplice visualizzazione?
Fr0zenFyr

nota che salverà l'input con la maiuscola, lo convertirà solo nella vista
Sherif Elkassaby

25

http://phpjs.org/functions/ucwords:569 ha un buon esempio

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

(commento della funzione omesso dalla fonte per brevità. Si prega di consultare la fonte collegata per i dettagli)

MODIFICA: tieni presente che questa funzione mette in maiuscolo la prima lettera di ogni parola (come chiede la tua domanda) e non solo la prima lettera di una stringa (come chiede il titolo della tua domanda)


Funziona meglio
dell'unica

Non funziona se hai un trattino basso nella stringa originale, aggiungilo al tuo REGEX per prestazioni migliori. TY
Ruslan Abuzant

1
@RuslanAbuzant Questo risponderebbe a una domanda diversa. Interpretare un trattino basso come un separatore di parole (o uno spazio vuoto generale) va bene, ma non è ciò che OP stava chiedendo ... e potrebbe persino interrompere il suo caso d'uso.
Jonathan Fingland

1
ucwords () fa schifo. Non funziona con Unicode (in particolare con alfabeto cirillico, greco e altri alfabeti dell'Europa centrale). Meglio usare mb_convert_case () sul back-end, ad esempio: mb_convert_case ($ _ POST ['name'], MB_CASE_TITLE, 'utf-8');
Aleksey Kuznetsov il

14

volevo solo aggiungere una pura soluzione javascript (no 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'));


1
grazie fratello, voglio solo correggere qualcosa. questo c < str.length;dovrebbe esserechr < str.length;
Leysam Rosario

13

Immagino che potresti usare substring () e toUpperCase () per estrarre il primo carattere, metterlo in maiuscolo e quindi sostituire il primo carattere della tua stringa con il risultato.

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

Penso che dovrebbe funzionare per te. Un'altra cosa da considerare è che se questi dati vengono visualizzati, è possibile aggiungere una classe al suo contenitore che ha la proprietà CSS "text-transform: capitalize".


non dovrebbe esserci come firstChar = firstChar.toUpperCase (); ? Ho provato il codice in Node.js e dovevo farlo o non è cambiato nulla!
Adrian Adaine

9

Per fare questo, non hai nemmeno bisogno di Javascript se intendi utilizzare

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

Perché non farlo come css come

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

oppure fallo come una classe e applica quella lezione ovunque ti serva

.ucwords { text-transform: capitalize; }

4
Benvenuto in Stackoverflow. La tua risposta suggerisce un'alternativa (che potrebbe essere perfettamente valida in alcuni casi d'uso), ma non risponde realmente alla domanda. Da quando ho capito la domanda, l'autore voleva trasformare effettivamente la variabile Javascript, e non solo la sua rappresentazione visiva.
helmbert

3
Sì, ma altre persone che arrivano a questa domanda potrebbero essere d'accordo con le risposte javascript o css, come me, e questo è stato davvero utile ...
Brian Powell

6

Mai sentito parlare substr()?

Per cominciare:

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


[Aggiornare:]

Grazie a @FelixKling per il suggerimento:

$("#test").text(function(i, text) {
    return text.substr(0,1).toUpperCase() + text.substr(1);
});

4
Invece di chiamare le text() quattro volte, passa una funzione a text():$("#test").text(function(i, text) { return text.substr(0,1).toUpperCase()+text.substr(1);});
Felix Kling

1
scavando qui vecchi corpi, ma se si $('#test').style.textTransform='capitalize';
sapesse che

Chiudi, @ Dementic, ma dovrebbe essere: $('#test').css('textTransform', 'capitalize'); BTW, questa è la migliore risposta qui. Lo presenterò come risposta.
vbullinger

@vbullinger - non giudicare il mio codice quando lo scrivo ubriaco da morire :) e adoro js, ​​non jq, quindi il mio codice è sbagliato, ma non troppodocument.getElementById('test').style.textTransform='capitalize';
Rafael Herscovici

5

Basandomi sulla risposta di @ peter-olson, ho adottato un approccio più orientato agli oggetti senza 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"

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


Questo è davvero il modo più corretto, secondo me. Lo chiamerei toUpperCaseWordsin linea con javascript toUpperCase()etoLowerCase()
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

4

Il modo più semplice

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

funzione definita dall'utente:

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

uscita: Hiren Raiyani

Usa il codice come funzione definita dall'utente o diretto


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

3

Puoi provare questo semplice codice con le funzionalità di ucwords in PHP.

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

Manterrà invariate le maiuscole.


3

È semplice come il seguente:

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

2

Basata completamente sulla risposta di @Dementric, questa soluzione è pronta per essere chiamata con un semplice metodo jQuery, 'ucwords' ... Grazie a tutti coloro che hanno contribuito qui !!!

$.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
}

});

ESEMPIO: può essere richiamato utilizzando il metodo

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

2

Puoi usare text-transform: capitalize;per questo lavoro -

HTML -

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

JQuery -

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

Prova questo

Nota: cambia solo la rappresentazione visiva della stringa. Se avvisi questa stringa, mostra sempre il valore originale della stringa.


0

La stringa da abbassare prima di rendere maiuscola la prima lettera.

(Entrambi usano la sintassi Jquery)

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

Inoltre una funzione per capitalizzare l'intera stringa:

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

Sintassi da utilizzare per un evento clic di una casella di testo:

onClick="CapitaliseFirstLetter('TextId'); return false"

0

Ho usato questo codice -

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);

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();
        }))
    });

0

Senza 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

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);


0

Ecco la funzione ucwords () unicode-safe, che inoltre rispetta i doppi cognomi come il russo Засс-Ранцев e alcuni nomi nobili come Honoré de Balzac, d'Artagnan, Vincent van Gogh, Otto von Bismarck, Sulaymān ibn Dāwūd, ecc:

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();
    });
}

0

Il modo più semplice per scrivere la prima lettera maiuscola in JS

var string = "made in india";

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

alert(string );

Risultato: "Made in India"

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.