Wielka pierwsza litera zmiennej


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


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.


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)


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


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”.


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

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

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/


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

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


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

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.


3

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

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

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"

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.


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"

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

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

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

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

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

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”

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.