Wielkie słowa w łańcuchach


182

Jakie jest najlepsze podejście do wielkich liter w ciągu?


66
Jeśli jest do wyświetlenia, użyj CSS. text-transform:capitalize;.
kennytm

3
służy to do ustawienia atrybutu „tytuł” ​​na elementy DOM. bez CSS :)
vsync

1
Zadałem też to pytanie, chociaż znam rozwiązanie, tylko dlatego, że próbowałem go znaleźć na tej stronie i nie mogłem znaleźć przyzwoitego rozwiązania, dlatego dodałem je ze względu na dokumentację.
vsync

1
@KennyTM: transformacja tekstu tak naprawdę nie pisałaby wielkimi wartościami pola formularza, wszystkie wartości byłyby pisane dużymi literami, ale przesyłane do serwera w niezmienionej postaci.
Marco Demaio

8
@Marco: Tak, dlatego powiedziałem „Jeśli to na pokaz”.
kennytm

Odpowiedzi:


287
/**
 * Capitalizes first letters of words in string.
 * @param {string} str String to be modified
 * @param {boolean=false} lower Whether all other letters should be lowercased
 * @return {string}
 * @usage
 *   capitalize('fix this string');     // -> 'Fix This String'
 *   capitalize('javaSCrIPT');          // -> 'JavaSCrIPT'
 *   capitalize('javaSCrIPT', true);    // -> 'Javascript'
 */
const capitalize = (str, lower = false) =>
  (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());
;

  • naprawia rozwiązanie Marco Demaio , w którym pierwsza litera ze spacją poprzedzającą nie jest wielka .
capitalize(' javascript'); // -> ' Javascript'
  • obsługuje symbole narodowe i litery akcentowane.
capitalize('бабушка курит трубку');  // -> 'Бабушка Курит Трубку'
capitalize('località àtilacol')      // -> 'Località Àtilacol'
  • radzi sobie z cytatami i nawiasami klamrowymi.
capitalize(`"quotes" 'and' (braces) {braces} [braces]`);  // -> "Quotes" 'And' (Braces) {Braces} [Braces]

4
Wyrażenie regularne działa jak „Weź wszystkie znaki niebiałe (\ S) stojące na początku łańcucha (^) lub po dowolnym znaku (białych znakach) i wielkie litery”
znieważony

3
Małe ulepszenie do obsługi ciągów wielkich liter :) ** String.prototype.capitalize = function () {return this.toLowerCase (). Replace (/ (?: ^ | \ S) \ S / g, function (a) {return a.toUpperCase ();}); }; **
SuryaPavan

1
Proszę nie zmieniać prototypów istniejących obiektów.
Ascherer

1
@ Dr.X patrz dodatek, 'CHECK THIS OUT'.capitalize(true) -> "Check This Out". trueParametr umysłu .
rozdarty

1
@ SeaWarrior404, masz rację, zaktualizowałem moją odpowiedź składnią es6, dodano jsdoc i trochę interpunkcji
zniechęcony

216

Najkrótszą implementacją wielkich liter w ciągu jest użycie funkcji strzałek ES6:

'your string'.replace(/\b\w/g, l => l.toUpperCase())
// => 'Your String'

Implementacja zgodna z ES5:

'your string'.replace(/\b\w/g, function(l){ return l.toUpperCase() })
// => 'Your String'

Wyrażenie regularne zasadniczo dopasowuje pierwszą literę każdego słowa w danym ciągu i przekształca tylko tę literę na wielkie litery:

  • \ b dopasowuje granicę słowa (początek lub koniec słowa);
  • \ w dopasowuje następujący metaznak [a-zA-Z0-9].

W przypadku znaków spoza ASCII skorzystaj z tego rozwiązania

'ÿöur striñg'.replace(/(^|\s)\S/g, l => l.toUpperCase())

Ten wyrażenie regularne dopasowuje pierwszą literę i każdą literę niebiałą poprzedzoną spacją w danym ciągu i przekształca tylko tę literę na wielkie litery:

  • \ s dopasowuje znak spacji
  • \ S dopasowuje znak spacji
  • (x | y) pasuje do dowolnej z podanych alternatyw

Grupę, której nie udało się przechwycić, można wykorzystać tutaj w następujący sposób /(?:^|\s)\S/g chociaż gflaga w naszym wyrażeniu regularnym nie będzie przechwytywać podgrup według projektu.

Twoje zdrowie!


1
Czy możesz wyjaśnić w odpowiedzi, jak działa wyrażenie regularne? (znaczenie każdego utworu)
vsync

2
Wybiorę go jako odpowiedź, jeśli wyjaśnienie będzie w nim, a nie jako komentarz, który można pominąć.
vsync

2
Wydaje się, że nie działa to dla znaków nordyckich ä, ö i å. Na przykład päijät-hämestaje sięPäIjäT-HäMe
Markus Meskanen,

1
To rozwiązanie nie jest dobre dla treści międzynarodowych zawierających znaki diakrytyczne / niełacińskie. EisbäRenjest na przykład jeden wynik.
Daniel B.

3
Przykład z @MarkusMeskanen powinien się zmienić na Päijät-Häme, ale przynajmniej w Chrome białe znaki nie zawierają myślnika (-), więc druga część nazwy nie jest pisana wielkimi literami. Może być ustawiony jako /(^|\s|-)\S/g.
MiRin,

33
function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');

wyjście: „To najgorszy ciąg w historii”

Aktualizacja:

Wygląda na to, że to rozwiązanie zastępuje moje: https://stackoverflow.com/a/7592235/104380


uważaj, że wydaje się, że twoja funkcja niesłusznie używa wielkich liter również, patrz moja odpowiedź: stackoverflow.com/questions/2332811/capitalize-words-in-string/... Ja też to protoy.
Marco Demaio,

9
Nie lubię prototypowania, może potencjalnie tworzyć kolizje, ponieważ ktoś inny używa tej samej nazwy również do prototypowania łańcucha.
vsync

15

Odpowiedź udzielana przez vsync działa tak długo, jak nie masz litery alfabetu w ciągu wejściowego.

Nie znam powodu, ale najwyraźniej \bw wyrażeniach regularnych dopasowuje również litery akcentowane (testowane na IE8 i Chrome), więc ciąg taki "località"zostałby nieprawidłowo zamieniony na wielkie litery zamienione na"LocalitÀ" ( àlitera jest pisana wielkimi literami, ponieważ regexp myśli, że to granica słowa)

Bardziej ogólną funkcją, która działa również z literami akcentowanymi, jest ta:

String.prototype.toCapitalize = function()
{ 
   return this.toLowerCase().replace(/^.|\s\S/g, function(a) { return a.toUpperCase(); });
}

Możesz użyć tego w następujący sposób:

alert( "hello località".toCapitalize() );

1
" javascript".toCapitalize() -> " javascript"
rozdarty

2
DO KOGO MOŻE OBAWIĆ: nieudana odpowiedź stackoverflow.com/questions/2332811/capitalize-words-in-string/... jest teraz najlepszą odpowiedzią tutaj.
Marco Demaio

4

Ponieważ wszyscy udzielili ci odpowiedzi JavaScript, o którą prosiłeś, dodam, że właściwość CSS text-transform: capitalizezrobi dokładnie to.

Zdaję sobie sprawę, że może nie o to prosisz - nie podałeś nam żadnego kontekstu, w którym to uruchamiasz - ale jeśli chodzi tylko o prezentację, zdecydowanie wybrałbym alternatywę CSS.


KennyTM cię pokonał. Sprawdź jego komentarz do sekcji pytań. :-)
Buhake Sindi

Tak, znam ten atrybut CSS, ale potrzebuję go do atrybutu tytułu do elementów dom i nie ma on wcale CSS, jak zapewne wiesz.
vsync

4

John Resig (znany z jQuery) przeniósł skrypt JavaScript napisany przez Johna Grubera na JavaScript. Ten skrypt używa wielkich liter w sposób bardziej inteligentny, nie używa wielkich liter takich jak na przykład „of” i „and”.

Można go znaleźć tutaj: Wielkie litery w JavaScript


4

Za pomocą JavaScript i HTML

String.prototype.capitalize = function() {
  return this.replace(/(^|\s)([a-z])/g, function(m, p1, p2) {
    return p1 + p2.toUpperCase();
  });
};
<form name="form1" method="post">
  <input name="instring" type="text" value="this is the text string" size="30">
  <input type="button" name="Capitalize" value="Capitalize >>" onclick="form1.outstring.value=form1.instring.value.capitalize();">
  <input name="outstring" type="text" value="" size="30">
</form>

Zasadniczo możesz to zrobić, string.capitalize()a każda litera każdego słowa będzie pisana wielką literą.

Źródło: http://www.mediacollege.com/internet/javascript/text/case-capitalize.html


1
Nie jestem fanem prototypowania w ten sposób, ponieważ moje skrypty są czasami osadzane przez inne firmy w innych witrynach internetowych, co może powodować problemy z bałaganem obiektów globalnych, takich jak „String” ... więc wolę zamiast tego „funkcjonować”.
vsync

1
Na tym polega piękno prototypu (a nie prototypu, który pobierasz). Jest standardem w javascript i działa we wszystkich przeglądarkach.
Buhake Sindi,

Podejrzewam, że może powodować problemy, jeśli ktoś już prototypuje swój własny String.prototype.capitalize, a ja przypadkowo go zastąpię.
vsync

1
@vsync, zawsze możesz to sprawdzić. if (object.capitalize) {...} else {String.prototype.capitalize = function()....}gdzie obiekt jest typu String. To naprawdę bardzo proste.
Buhake Sindi

4

Odpowiedź Ivo jest dobra, ale wolę się nie zgadzać, \wponieważ nie ma potrzeby używania wielkich liter 0-9 i AZ. Możemy je zignorować i pasować tylko do az.

'your string'.replace(/\b[a-z]/g, match => match.toUpperCase())
// => 'Your String'

Jest to ten sam wynik, ale myślę, że jest jaśniejszy pod względem kodu samodokumentującego.


To nie dla non angielskiego na literę: "Är Toaletten". Twoja odpowiedź, wiele lat po udzieleniu bardzo dobrej odpowiedzi, nie przyczynia się do dyskusji.
vsync

@vsync, który wydaje się dość trudny. jest to optymalizacja przyjętej odpowiedzi. /\b\w/gzawiesza się również w przypadku liter innych niż angielski. Nie wszyscy mają do czynienia ze znakami Unicode, a to pomoże tym, którzy tego nie chcą.
Big Money

1
W porządku .. Po prostu nie sądzę, że powinieneś użyć tego zamiast najwyższej odpowiedzi tylko dlatego, że nie potrzebujesz innych języków oprócz angielskiego. To nie jest wystarczające uzasadnienie, ponieważ nie ma kary za zrobienie tego dla wszystkich znaków ASCII, jak powiedziano w głównym pytaniu
vsync

3

Jeśli używasz lodash w swojej aplikacji JavaScript, możesz użyć _.capitalize :

console.log( _.capitalize('ÿöur striñg') );
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>


3

Zwięzły sposób na wykonanie tego w ES6 może wyglądać mniej więcej tak.

const capitalizeFirstLetter = s => s.charAt(0).toUpperCase() + s.slice(1)

To tylko wielkie litery pierwszej litery i nie wpływa na resztę wielkości zdania.


2

Moje rozwiązanie:

String.prototype.toCapital = function () {
    return this.toLowerCase().split(' ').map(function (i) {
        if (i.length > 2) {
            return i.charAt(0).toUpperCase() + i.substr(1);
        }

        return i;
    }).join(' ');
};

Przykład:

'álL riGht'.toCapital();
// Returns 'Áll Right'

Wypróbuj kilka metod, a Twoje rozwiązanie jest najbardziej wydajne i szanuje akcenty nazwy jsbench.me/urjeu9wvql
nasatome

To nie działa: 'a áAA. bb . bbb .cc .d'.toCapital();=>a Áaa. bb . Bbb .cc .d
vsync

Postanowiłem nie brać pod uwagę słów zawierających mniej niż 2 litery, np. „Z”, „jako”.
Erick Tatsui

1

Powinno to obejmować najbardziej podstawowe przypadki użycia.

const capitalize = (str) => {
    if (typeof str !== 'string') {
      throw Error('Feed me string')
    } else if (!str) {
      return ''
    } else {
      return str
        .split(' ')
        .map(s => {
            if (s.length == 1 ) {
                return s.toUpperCase()
            } else {
                const firstLetter = s.split('')[0].toUpperCase()
                const restOfStr = s.substr(1, s.length).toLowerCase()
                return firstLetter + restOfStr
            }     
        })
        .join(' ')
    }
}


capitalize('THIS IS A BOOK') // => This Is A Book
capitalize('this is a book') // => This Is A Book
capitalize('a 2nd 5 hour boOk thIs weEk') // => A 2nd 5 Hour Book This Week

Edycja: Poprawiona czytelność mapowania.


Czy możesz wyjaśnić, dlaczego Twoim zdaniem Twoja odpowiedź jest lepsza niż inni sprzed wielu lat?
vsync

Czy możesz wyjaśnić, dlaczego myślałeś, że mam na myśli, że moja odpowiedź jest najlepsza / lub lepsza od innych? Nie wspomniałem o tym, po prostu jest inaczej. Nie widziałem też, abyś zostawił ten komentarz w innych postach, więc naprawdę go nie rozumiem. Ale na początek: wykorzystuje nowoczesne funkcje js (destrukcja, gruba strzała, ukryty powrót), nie używa regxu i jest bardziej funkcjonalnym podejściem do problemu. Ma również bardzo podstawową obsługę błędów i zwraca pusty ciąg, jeśli przekażesz jeden (dla mnie to było ważne).
Krople

może być inaczej, ale musi być lepszy lub równy innym odpowiedziom i wydaje się być ... nieczytelny i na pewno nic nie wprowadziłby kodu produkcyjnego, ponieważ nikt nie byłby w stanie go zrozumieć
vsync

Ach, okej, więc 50% rozwiązań tutaj, który łańcuch monkeypatch rzeczywiście wprowadzisz do produkcji? A może zawiłe wyrażenia regularne? Są o wiele łatwiejsze do uzasadnienia, prawda? Imho absolutnie nie! Mówienie, że nikt tego nie zrozumie, jest dość subiektywnym stwierdzeniem. Również w tym przypadku powiedziałeś, że jest to pocięty fragment kodu (więcej funkcji, ale tutaj tak nie jest). Jak to jest rozdrobnione, a moje rozwiązanie nikt nie zrozumie? Nie ma możliwości, abyś rozwiązał te wyrażenia regularne bez utraty godzin.
Krople

Ten kod został napisany przez samego pana Resiga i nie należy go kwestionować. Z drugiej strony brakuje ci wiarygodności z powodu swojej anonimowości. Niezależnie od tego rozwiązanie Regex jest krótsze, działa znacznie szybciej, a także jest łatwe do odczytania przez każdego, kto nauczył się podstaw Regex. W tym nie ma wiele do „rozplątania”: /\b\w/g...
vsync

1

Ta dawka rozwiązania nie używa wyrażenia regularnego, obsługuje znaki akcentowane, a także obsługiwana przez prawie każdą przeglądarkę.

function capitalizeIt(str) {
    if (str && typeof(str) === "string") {
        str = str.split(" ");    
        for (var i = 0, x = str.length; i < x; i++) {
            if (str[i]) {
                str[i] = str[i][0].toUpperCase() + str[i].substr(1);
            }
        }
        return str.join(" ");
    } else {
        return str;
    }
}    

Stosowanie:

console.log (capitalizeIt ('çao 2nd inside program JavaScript'));

Wynik:

2ndao 2nd Inside Javascript Program


1
W ten sposób zużywa dużo zasobów procesora. JavaScript nie zmienia prymitywnych wartości, co oznacza tworzenie nowej za każdym razem, gdy wykonywana jest operacja. Lepiej użyj natywnych funkcji, takich jak „replace”, exempli gratia
Daniel Bandeira,

0

http://www.mediacollege.com/internet/javascript/text/case-capitalize.html jest jedną z wielu dostępnych odpowiedzi.

Google może być wszystkim, czego potrzebujesz do takich problemów.

Naiwnym podejściem byłoby dzielenie łańcucha przez spację, pisanie wielką literą każdego elementu wynikowej tablicy i łączenie jej z powrotem. Pozostawia to istniejące wielkie litery (np. HTML pozostaje HTMLem i nie staje się czymś głupim jak HTML). Jeśli nie chcesz, aby to wpłynęło, zmień cały łańcuch na małe litery przed podzieleniem.


0

W tym kodzie wielkie litery są kropkowane:

function capitalizeAfterPeriod(input) { 
    var text = '';
    var str = $(input).val();
    text = convert(str.toLowerCase().split('. ')).join('. ');
    var textoFormatado = convert(text.split('.')).join('.');
    $(input).val(textoFormatado);
}

function convert(str) {
   for(var i = 0; i < str.length; i++){
      str[i] = str[i].split('');
      if (str[i][0] !== undefined) {
         str[i][0] = str[i][0].toUpperCase();
      }
      str[i] = str[i].join('');
   }
   return str;
}

0

Lubię iść z łatwym procesem. Najpierw zmień ciąg znaków na tablicę, aby ułatwić iterację, a następnie za pomocą funkcji mapy zmień każde słowo tak, jak chcesz.

function capitalizeCase(str) {
    var arr = str.split(' ');
    var t;
    var newt;
    var newarr = arr.map(function(d){
        t = d.split('');
        newt = t.map(function(d, i){
                  if(i === 0) {
                     return d.toUpperCase();
                    }
                 return d.toLowerCase();
               });
        return newt.join('');
      });
    var s = newarr.join(' ');
    return s;
  }

0

Jquery lub JavaScript nie zapewnia wbudowanej metody osiągnięcia tego celu.

Transformacja testowa CSS (transformacja tekstu: wielkie litery;) tak naprawdę nie kapitalizuje danych ciągu, ale pokazuje renderowanie wielkich liter na ekranie.

Jeśli szukasz bardziej uzasadnionego sposobu osiągnięcia tego na poziomie danych za pomocą zwykłego vanillaJS, użyj tego rozwiązania =>

var capitalizeString = function (word) {    
    word = word.toLowerCase();
    if (word.indexOf(" ") != -1) { // passed param contains 1 + words
        word = word.replace(/\s/g, "--");
        var result = $.camelCase("-" + word);
        return result.replace(/-/g, " ");
    } else {
    return $.camelCase("-" + word);
    }
}

0

Użyj tego:

String.prototype.toTitleCase = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
}

let str = 'text';
document.querySelector('#demo').innerText = str.toTitleCase();
<div class = "app">
  <p id = "demo"></p>
</div>


0

Możesz użyć następujących słów, aby wpisać wielkie litery w ciągu:

function capitalizeAll(str){

    var partes = str.split(' ');

    var nuevoStr = ""; 

    for(i=0; i<partes.length; i++){
    nuevoStr += " "+partes[i].toLowerCase().replace(/\b\w/g, l => l.toUpperCase()).trim(); 
    }    

    return nuevoStr;

}

0

Istnieje również locutus: https://locutus.io/php/strings/ucwords/, który definiuje to w ten sposób:

function ucwords(str) {
  //  discuss at: http://locutus.io/php/ucwords/
  // original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  // improved by: Waldo Malqui Silva (http://waldo.malqui.info)
  // improved by: Robin
  // improved by: Kevin van Zonneveld (http://kvz.io)
  // bugfixed by: Onno Marsman (https://twitter.com/onnomarsman)
  // bugfixed by: Cetvertacov Alexandr (https://github.com/cetver)
  //    input by: James (http://www.james-bell.co.uk/)
  //   example 1: ucwords('kevin van  zonneveld')
  //   returns 1: 'Kevin Van  Zonneveld'
  //   example 2: ucwords('HELLO WORLD')
  //   returns 2: 'HELLO WORLD'
  //   example 3: ucwords('у мэри был маленький ягненок и она его очень любила')
  //   returns 3: 'У Мэри Был Маленький Ягненок И Она Его Очень Любила'
  //   example 4: ucwords('τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός')
  //   returns 4: 'Τάχιστη Αλώπηξ Βαφής Ψημένη Γη, Δρασκελίζει Υπέρ Νωθρού Κυνός'

  return (str + '').replace(/^(.)|\s+(.)/g, function ($1) {
    return $1.toUpperCase();
  });
};

0

W tym celu użyłbym wyrażenia regularnego:

myString = '  this Is my sTring.  ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
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.