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.