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