JS/CSS實現(xiàn)字符串單詞首字母大寫功能
css實現(xiàn):
text-transform:capitalize;
JS代碼一:
String.prototype.firstUpperCase = function(){ return this.replace(/\b(\w)(\w*)/g,function($0,$1,$2){ return $1.toUpperCase() + $2.toLowerCase(); }) } var result = "i'm hello world".firstUpperCase();; console.log(result); //I'M Hello World
注:正則表達式\b會把英文縮寫,譬如I'm拆分成兩個部分,導(dǎo)致輸出為I'M,所以不能使用\b
JS代碼二:
String.prototype.firstUpperCase = function(){ let arr = this.split(' '); let uppserCase = ([first,...rest]) => first.toUpperCase() + rest.join(''); let result = ''; arr.forEach((val) => { result += uppserCase(val) + ' '; }) return result; } //結(jié)果://I'm Hello World
JS代碼三:
String.prototype.firstUpperCase = function(){ let arr = this.split(' '); let result = ''; arr.forEach((val) => { result += val.charAt(0).toUpperCase() + val.slice(1) + ' '; }) return result; } //結(jié)果://I'm Hello World
JS代碼四:
String.prototype.firstUpperCase = function(){ let arr = this.split(' '); let result = ''; arr.forEach((val) => { result += `${val[0].toUpperCase()}${val.slice(1)} `; }) return result; } //結(jié)果://I'm Hello World
注:
\b:匹配一個單詞邊界,也就是指單詞和空格間的位置。例如, 'erb' 可以匹配"never" 中的 'er',但不能匹配 "verb" 中的 'er'。
\w:匹配包括下劃線的任何單詞字符。等價于'[A-Za-z0-9_]'。
*:匹配前面的子表達式零次或多次。例如,zo 能匹配 "z" 以及 "zoo"。 等價于{0,}。
\s:匹配任何空白字符,包括空格、制表符、換頁符等等。等價于 [ fnrtv]。
\S:匹配任何非空白字符。等價于 [^ \f\n\r\t\v]。
總結(jié)
以上所述是小編給大家介紹的JS/CSS實現(xiàn)字符串單詞首字母大寫功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
JS實現(xiàn)數(shù)組去重復(fù)值的方法示例
這篇文章主要介紹了JS實現(xiàn)數(shù)組去重復(fù)值的方法,結(jié)合實例形式分析了JS通過數(shù)組遍歷、運算等方法實現(xiàn)去重復(fù)值的操作技巧,需要的朋友可以參考下2017-02-02解析利用javascript如何判斷一個數(shù)為素數(shù)
本文主要分享了利用javascript如何判斷一個數(shù)為素數(shù)的具體實例代碼,有需要的朋友可以作為參考看下2016-12-12學(xué)習(xí)JavaScript設(shè)計模式(繼承)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計模式,其中重點介紹繼承,舉例說明為什么需要繼承,對繼承進行詳細剖析,感興趣的小伙伴們可以參考一下2015-11-11怎樣在CocosCreator中使用物理引擎關(guān)節(jié)
這篇文章主要介紹了怎樣在CocosCreator中使用物理引擎關(guān)節(jié),對物理引擎感興趣的同學(xué),著重要看一下2021-04-04JavaScript 判斷指定字符串是否為有效數(shù)字
最近在做一個ColdFusion的項目,有一個業(yè)務(wù)Check,需要用JavaScript實現(xiàn):判斷指定字符串是否為有效數(shù)字。2010-05-05前端實現(xiàn)word文檔預(yù)覽和內(nèi)容提取的詳細過程
在前端直接讀取并原樣展示W(wǎng)ord文檔是一個相對復(fù)雜的任務(wù),因為Word文檔的格式(如.doc或.docx)與Web技術(shù)棧使用的格式(HTML、CSS)不兼容,下面這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)word文檔預(yù)覽和內(nèi)容提取的詳細過程,需要的朋友可以參考下2024-05-05JavaScript中clientWidth,offsetWidth,scrollWidth的區(qū)別
這篇文章主要介紹了Element中clientWidth,offsetWidth,scrollWidth的區(qū)別,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2021-01-01