Wielka pierwsza litera zmiennej

88

Szukałem w Internecie i nie mogę znaleźć niczego, co mogłoby mi pomóc. Chcę, aby pierwsza litera każdego słowa była wielka w zmiennej.

Do tej pory próbowałem:

toUpperCase();

I nie miałem szczęścia, ponieważ wszystkie litery są wielkie.

ryryan
źródło

Odpowiedzi:

227

Użyj funkcji .replace[MDN], aby zamienić małe litery zaczynające się na wielką literę.

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


Edycja: Jeśli masz do czynienia ze znakami słów innymi niż tylko az, poniższe (bardziej skomplikowane) wyrażenie regularne może lepiej pasować do twoich celów.

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
źródło
1
To nie działa z nazwami takimi jak Björn Lüchingerto się stanie BjöRn LüChinger. Jakieś rozwiązanie tego problemu?
Dediqated
2
@Dediqated Dzięki za wskazanie tego, daj mi znać, jeśli zmiana pomoże.
Peter Olson,
Działa świetnie! Jakieś wskazówki na temat tego, jaka powinna być modyfikacja, jeśli chcę tylko zamienić na wielką literę pierwszy znak ciągu? (zamiast każdego słowa)
Andres SK
6
@andufo Jasne, w rzeczywistości jest to znacznie prostsze. Po prostu użyjstr[0].toUpperCase() + str.slice(1)
Peter Olson
@PeterOlson dzięki za odpowiedź! Skończyło się również 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);na opisywaniu znaków specjalnych.
Andres SK
72

O wiele łatwiejszy sposób:

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

Muszę przyznać @Dementic pewną zasługę za prowadzenie mnie właściwą ścieżką. O wiele prostsze niż to, co proponujesz.

vbullinger
źródło
32
Zmienia to tylko wizualną reprezentację ciągu, a nie samą wartość ciągu.
toxaq
1
Nie możesz tego zastosować do zmiennych pobranych z DB, ale w innych przypadkach ta metoda jest bardzo czysta
Armand
3
Uwaga: text-transform:capitalizenie ma wpływu na WIELKIE LITERY.
Bob Stein
1
A co, jeśli łańcuch (zmienna) musi być użyty do jakiejś operacji innej niż tylko wyświetlanie?
Fr0zenFyr
zwróć uwagę, że zapisze dane wejściowe z wielką literą, skonwertuje je tylko w widoku
Sherif Elkassaby
25

http://phpjs.org/functions/ucwords:569 ma dobry przykład

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

(pominięto komentarz funkcji ze źródła ze względu na zwięzłość. Szczegółowe informacje można znaleźć w połączonym źródle)

EDYTUJ: Zwróć uwagę, że ta funkcja zamienia na wielką wielką pierwszą literę każdego słowa (zgodnie z pytaniem), a nie tylko pierwszą literę ciągu (zgodnie z tytułem pytania)

Jonathan Fingland
źródło
Działa to lepiej niż przyjęte rozwiązanie, w którym słowa w zdaniu po apostrofie są wielkimi literami, więc np. „Jestem przykładem” staje się „Jestem przykładem”
lizardhr
Nie działa, jeśli masz podkreślenie w oryginalnym ciągu, dodaj go do REGEX, aby uzyskać lepszą wydajność. TY
Ruslan Abuzant
1
@RuslanAbuzant To byłaby odpowiedź na inne pytanie. Interpretacja podkreślenia jako separatora wyrazów (lub ogólnej pustej przestrzeni) jest w porządku, ale nie jest tym, o co prosił OP ... i może nawet złamać jego przypadek użycia.
Jonathan Fingland
1
ucwords () jest do bani. Nie działa z Unicode (szczególnie z cyrylicą, greką i innymi alfabetami środkowoeuropejskimi). Lepiej użyj mb_convert_case () na zapleczu, np .: mb_convert_case ($ _ POST ['name'], MB_CASE_TITLE, 'utf-8');
Aleksey Kuznetsov
14

chciałem tylko dodać czyste rozwiązanie javascript (bez 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
źródło
1
dzięki stary, chcę tylko coś poprawić. tak c < str.length;powinno byćchr < str.length;
Leysam Rosario
13

Wyobrażam sobie, że możesz użyć funkcji substring () i toUpperCase (), aby wyciągnąć pierwszy znak, zamienić go na wielką, a następnie zamienić pierwszy znak ciągu na wynik.

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

Myślę, że to powinno działać dla Ciebie. Inną rzeczą do rozważenia jest to, że jeśli te dane są wyświetlane, możesz dodać do kontenera klasę, która ma właściwość CSS „text-transform: capitalize”.

Fudgie
źródło
nie powinno być typu firstChar = firstChar.toUpperCase (); ? Wypróbowałem kod w Node.js i musiałem to zrobić albo nic się nie zmieniło!
Adrian Adaine
9

Aby to zrobić, nie potrzebujesz nawet JavaScript, jeśli masz zamiar używać

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

Dlaczego nie zrobić tego tak jak w CSS?

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

lub zrób to jako klasa i zastosuj tę klasę tam, gdzie jej potrzebujesz

.ucwords { text-transform: capitalize; }
Bruce Smith
źródło
4
Witamy w Stackoverflow. Twoja odpowiedź sugeruje alternatywę (która może być całkowicie poprawna w niektórych przypadkach użycia), ale tak naprawdę nie odpowiada na pytanie. Jak zrozumiałem pytanie, autor chciał faktycznie przekształcić zmienną Javascript, a nie tylko jej reprezentację wizualną.
helmbert
3
Tak, ale inne osoby, które przychodzą na to pytanie, mogą być w porządku z odpowiedziami javascript LUB css, jak ja, i to było naprawdę pomocne ...
Brian Powell
6

Słyszałeś kiedyś o substr()?

Na początek:

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


[Aktualizacja:]

Dzięki @FelixKling za wskazówkę:

$("#test").text(function(i, text) {
    return text.substr(0,1).toUpperCase() + text.substr(1);
});
Szyfrować
źródło
4
Zamiast wywoływać text() cztery razy, przekaż funkcję do text():$("#test").text(function(i, text) { return text.substr(0,1).toUpperCase()+text.substr(1);});
Felix Kling
1
wykopywanie tu starego korpusu, ale gdyby było wiadomo, że zawartość przechodzi do elementu, byłoby znacznie łatwiej:$('#test').style.textTransform='capitalize';
Rafael Herscovici
Blisko, @Dementic, ale powinno być: przy $('#test').css('textTransform', 'capitalize'); okazji, to najlepsza odpowiedź tutaj. Podam to jako odpowiedź.
vbullinger
@vbullinger - nie oceniaj mojego kodu, kiedy piszę go pijany :) i uwielbiam js, nie jq, więc mój kod jest zły, ale nie za bardzodocument.getElementById('test').style.textTransform='capitalize';
Rafael Herscovici
5

Opierając się na odpowiedzi @ peter-olson, przyjąłem bardziej zorientowane obiektowo podejście bez 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"

Przykład: http://jsfiddle.net/LzaYH/1/

mmalone
źródło
Moim zdaniem to naprawdę najwłaściwszy sposób. Nazwałbym to toUpperCaseWordszgodnie z javascript toUpperCase()itoLowerCase()
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
źródło
4

Najprostszy sposób

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

funkcja zdefiniowana przez użytkownika:

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

wyjście: Hiren Raiyani

Użyj kodu jako funkcji zdefiniowanej przez użytkownika lub bezpośrednio

Hiren Raiyani
źródło
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
źródło
3

Możesz wypróbować ten prosty kod z funkcjami ucwords w PHP.

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

Dzięki temu górne skrzynki pozostaną niezmienione.

IamMHussain
źródło
3

Jest to tak proste, jak następujące:

string = 'test';
newString = string[0].toUpperCase() + string.slice(1);
alert(newString);
Sol
źródło
2

Oparte całkowicie na odpowiedzi @Dementric, to rozwiązanie jest gotowe do wywołania za pomocą prostej metody jQuery „ucwords”… Dziękujemy wszystkim, którzy tu przyczynili się !!!

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

});

PRZYKŁAD: Można to wywołać za pomocą metody

var string = "this is a test";
string = $.ucwords(string); // Returns "This Is A Test"
JoomGuy
źródło
2

Możesz użyć text-transform: capitalize;do tej pracy -

HTML -

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

JQuery -

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

Spróbuj tego

Uwaga: zmienia tylko wizualną reprezentację ciągu. Jeśli ostrzeżesz ten ciąg, zawsze pokaże oryginalną wartość ciągu.

Ishan Jain
źródło
0

Ciąg do zmniejszenia przed zamianą pierwszej litery na wielką literę.

(Oba używają składni Jquery)

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

Dodatkowo funkcja do wykorzystania CAŁEGO napisu wielką literą:

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

Składnia do użycia w zdarzeniu kliknięcia pola tekstowego:

onClick="CapitaliseFirstLetter('TextId'); return false"
Rubyist
źródło
0

Użyłem tego kodu -

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
źródło
0

HTML:

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

JavaScript z 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
źródło
0

Bez 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
źródło
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);

Skała
źródło
0

Oto funkcja ucwords () bezpieczna dla Unicode, która dodatkowo uwzględnia podwójne nazwiska, takie jak rosyjskie Засс-Ранцев i niektóre szlachetne nazwiska, takie jak Honoré de Balzac, d'Artagnan, Vincent van Gogh, Otto von Bismarck, Sulaymān ibn Dāwūd itp.

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
źródło
0

Najłatwiejszy sposób na wielką pierwszą literę w JS

var string = "made in india";

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

alert(string );

Wynik: „Wyprodukowano w Indiach”

Uwielbiam Kumara
źródło