Hướng dẫn string totitlecase javascript
Asked 13 years, 11 months ago Show Viewed 598k times Is there a simple way to convert a string to Title Case? E.g.
Penny Liu 12.9k5 gold badges71 silver badges86 bronze badges asked Oct 13, 2008 at 8:05
5 Try this:
meyi 6,6841 gold badge14 silver badges27 bronze badges answered Oct 13, 2008 at 8:18
Greg DeanGreg Dean 28.5k14 gold badges66 silver badges76 bronze badges 19 If a CSS solution meets your needs, you can apply the text-transform CSS style to your controls:
Just be aware that this will transform:
Michael 7,6555 gold badges57 silver badges87 bronze badges answered Jun 16, 2010 at 14:58
Talha AshfaqueTalha Ashfaque 3,2001 gold badge14 silver badges7 bronze badges 13 A slightly more elegant way, adapting Greg Dean's function:
Call it like:
answered Apr 7, 2011 at 0:14
TuanTuan 5,2731 gold badge21 silver badges17 bronze badges 8 Here's my version, IMO it's easy to understand and elegant too.
xinthose 2,6652 gold badges37 silver badges57 bronze badges answered Mar 5, 2014 at 9:07
a8ma8m 9,1384 gold badges35 silver badges40 bronze badges 9 Here’s my function that converts to title case but also preserves defined acronyms as uppercase and minor words as lowercase:
For example:
answered Jun 25, 2011 at 1:04
Geoffrey BoothGeoffrey Booth 6,9625 gold badges34 silver badges40 bronze badges 10 I prefer the following over the other answers. It matches only the first letter of each word and capitalises it. Simpler code, easier to read and less bytes. It preserves existing capital letters to prevent distorting acronyms. However you can always call
You can add this to your string prototype which will allow you to
Example: answered Oct 26, 2017 at 16:36
Tom KayTom Kay 1,47215 silver badges25 bronze badges 10
You could immediately
answered Oct 18, 2016 at 15:09
KevBotKevBot 16.6k5 gold badges49 silver badges67 bronze badges 6 BenchmarkTL;DRThe winner of this benchmark is the plain old for loop:
DetailsI've taken the most popular and distinct answers and made a benchmark with those. Here's the result on my MacBook pro: And for completeness, here are the functions used:
Note that i deliberately did not change the prototype since I consider it a really bad practice and I don't think we should promote such practice in our answers. This is only ok for small codebases when you're the only one working on it. If you want to add any other way to do it to this benchmark, please comment a link to the answer ! EDIT 2022 Mac M1: On my new computer, with more recent chrome, split wins. If you really care about performance on a specific machine you should run the benchmark yourself answered Nov 19, 2020 at 10:56
Ulysse BNUlysse BN 8,9457 gold badges48 silver badges76 bronze badges 4
answered Dec 24, 2013 at 15:17
simosimo 14.6k7 gold badges44 silver badges58 bronze badges 5 Without using regex just for reference:
adiga 32.4k8 gold badges55 silver badges78 bronze badges answered Dec 19, 2011 at 16:25
MikeMike 4273 silver badges6 bronze badges 1 Surprised to see no one mentioned the use of rest parameter. Here is a simple one liner that uses ES6 Rest parameters.
answered May 18, 2020 at 16:53
kapil pandeykapil pandey 1,7331 gold badge12 silver badges25 bronze badges 0 Just in case you are worried about those filler words, you can always just tell the function what not to capitalize.
Hope this helps you out. editIf you want to handle leading glue words, you can keep track of this w/ one more variable:
answered Nov 13, 2010 at 5:17
fncompfncomp 5,9103 gold badges33 silver badges42 bronze badges 6 If you need a grammatically correct answer: This answer takes into account prepositions such as "of", "from", .. The output will generate an editorial style title you would expect to see in a paper. toTitleCase Function The function that takes into account grammar rules listed here. The function also consolidates whitespace and removes special characters (modify regex for your needs)
Unit Tests to Ensure Correctness
Please note that I am removing quite a bit of special characters from the strings provided. You will need to tweak the regex to address the requirements of your project. answered Oct 16, 2017 at 16:17
dipole_momentdipole_moment 4,5562 gold badges38 silver badges55 bronze badges 4 If regex used in the above solutions is getting you confused, try this code:
answered Feb 28, 2016 at 10:16
6 I made this function which can handle last names (so it's not title case) such as "McDonald" or "MacDonald" or "O'Toole" or "D'Orazio". It doesn't however handle German or Dutch names with "van" or "von" which are often in lower-case... I believe "de" is often lower-case too such as "Robert de Niro". These would still have to be addressed.
answered Feb 3, 2010 at 22:22
LwangamanLwangaman 1291 silver badge2 bronze badges 3
If you can use third party libraries in your code then lodash has a helper function for us. https://lodash.com/docs/4.17.3#startCase
answered Dec 29, 2016 at 11:27
waqaswaqas 4,2473 gold badges33 silver badges42 bronze badges ES 6
else
Steve Bennett 103k30 gold badges152 silver badges204 bronze badges answered Oct 27, 2016 at 15:52
jssridharjssridhar 4604 silver badges10 bronze badges 5 First, convert your
Then use array.map to create a new array containing the capitalized words.
Then join the new array with spaces:
NOTE: This of course has a drawback. This will only capitalize the first letter of every word. By word, this means that it treats every string separated by spaces as 1 word. Supposedly you have:
This will produce
compared to the expected
In that case, using Regex and .replace will do the trick: with ES6:
or without ES6:
answered Sep 30, 2017 at 9:28
xGeoxGeo 2,1192 gold badges16 silver badges39 bronze badges Most of these answers seem to ignore the possibility of using the word boundary metacharacter (\b). A shorter version of Greg Dean's answer utilizing it:
Works for hyphenated names like Jim-Bob too. answered Jul 16, 2014 at 14:59
lewax00lewax00 1881 silver badge8 bronze badges 3
Seems to work... Tested with the above, "the quick-brown, fox? /jumps/ ^over^ the ¡lazy! dog..." and "C:/program files/some vendor/their 2nd application/a file1.txt". If you want 2Nd instead of 2nd, you can change to The first form can be simplified as:
answered Oct 13, 2008 at 8:17
PhiLhoPhiLho 39.9k6 gold badges94 silver badges132 bronze badges Try this, shortest way:
Mr. Polywhirl 36.6k12 gold badges76 silver badges124 bronze badges answered Jun 6, 2017 at 9:52
VikramVikram 5645 silver badges16 bronze badges 1 Try this
Example
answered May 16, 2012 at 19:05
Maxi BaezMaxi Baez 5805 silver badges13 bronze badges 0 Use
However: "sunshine (yellow)" ⇒ "Sunshine (yellow)" answered Jun 20, 2016 at 20:31
le_mle_m 18.4k9 gold badges61 silver badges74 bronze badges I think the simplest is using css.
answered Jul 7, 2017 at 5:01
wondimwondim 67913 silver badges27 bronze badges 3
answered Jun 21, 2019 at 8:30
ProximoProximo 5,79710 gold badges46 silver badges64 bronze badges 3 Here's a really simple & concise ES6 function to do this:
Works well included in a
answered Nov 19, 2020 at 10:39
Hedley SmithHedley Smith 1,26115 silver badges12 bronze badges 1 Here is my function that is taking care of accented characters (important for french !) and that can switch on/off the handling of lowers exceptions. Hope that helps.
answered Dec 11, 2016 at 16:36
OuatatazOuatataz 1552 silver badges11 bronze badges here's another solution using css (and javascript, if the text you want to transform is in uppercase): html
js
css
answered Oct 25, 2018 at 12:12
henriehenrie 1471 silver badge12 bronze badges I've tested this solution for Turkish and it works with special characters too.
I've added "toLocaleLowerCase" at the begining since I've all caps data. You can discard it if you don't need it. Using locale operations is important for non-english languages. answered Jan 12 at 13:10
KeremKerem 1032 silver badges7 bronze badges 4 Taking the "lewax00" solution I created this simple solution that force to "w" starting with space or "w" that initiate de word, but is not able to remove the extra intermediate spaces.
The result is "Sofía Vergara". answered Sep 30, 2014 at 18:52
AserewareAsereware 9896 silver badges7 bronze badges |