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