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會(huì)把英文縮寫，譬如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)字符串單詞首字母大寫功能,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
JavaScript高仿支付寶倒計(jì)時(shí)頁面及代碼實(shí)現(xiàn)
在支付寶上我們經(jīng)常會(huì)見到支付寶倒計(jì)時(shí)功能，倒計(jì)時(shí)應(yīng)用非常廣泛，下文給大家介紹js制作支付寶倒計(jì)時(shí)功能，但是里面涉及到，倒計(jì)時(shí)，彈框，以及字體圖的相關(guān)知識(shí)，感興趣的朋友一起看看吧2016-10-10
下面小編就為大家?guī)硪黄獪\談$_FILES數(shù)組為空的原因。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
輕量級(jí)JS Cookie插件js-cookie的使用方法
js-cookie插件是一個(gè)JS操作cookie的插件，源文件只有3.34 KB，非常輕量級(jí)，js-cookie也支持npm和Bower安裝和管理，下面看看js-cookie的具體用法2018-03-03
javascript中for/in循環(huán)及使用技巧
如果您希望一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的，本篇文章給大家介紹javascript中for/in循環(huán)及使用技巧 ，需要的朋友可以參考下2015-09-09
瀑布流的實(shí)現(xiàn)方式（原生js+jquery+css3）
這篇文章主要為大家詳細(xì)介紹了原生js+jquery+css3實(shí)現(xiàn)瀑布流的相關(guān)代碼，三種實(shí)現(xiàn)瀑布流的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
Firefox/Chrome/Safari的中可直接使用$/$$函數(shù)進(jìn)行調(diào)試
偶然發(fā)現(xiàn)的，頁面中沒有引入Prototype和jQuery?？刂婆_(tái)中敲$卻發(fā)現(xiàn)是一個(gè)函數(shù)。又試著敲$$，也是個(gè)function2012-02-02
下面小編就為大家?guī)硪黄狫avaScript正則表達(dá)式-非捕獲性分組。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(一)
這篇文章主要介紹了Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(一)的相關(guān)資料,需要的朋友可以參考下2016-05-05
javascript實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉菜單的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉菜單的方法,通過javascript自定義函數(shù)實(shí)現(xiàn)對(duì)多級(jí)聯(lián)動(dòng)下拉菜單的操作,是非常實(shí)用的技巧,需要的朋友可以參考下2015-02-02
XMLHttpRequest對(duì)象_Ajax異步請(qǐng)求重點(diǎn)(推薦)
下面小編就為大家?guī)硪黄猉MLHttpRequest對(duì)象_Ajax異步請(qǐng)求重點(diǎn)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09