黑马程序员技术交流社区

标题: 【上海校区】小tips：JS/CSS实现字符串单词首字母大写 [打印本页]

---

作者: 梦缠绕的时候    时间: 2019-9-3 08:35
标题: 【上海校区】小tips：JS/CSS实现字符串单词首字母大写

css实现：

text-transform:capitalize;

JS代码一：

[url=][/url]
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[url=][/url]

注：正则表达式\b会把英文缩写，譬如I'm拆分成两个部分，导致输出为I'M,所以不能使用\b

JS代码二：

[url=][/url]
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;}//结果：//I'm Hello World [url=][/url]

JS代码三：

[url=][/url]
String.prototype.firstUpperCase = function(){    let arr = this.split(' ');    let result = '';    arr.forEach((val) => {        result += val.charAt(0).toUpperCase() + val.slice(1) + ' ';    })    return result;}//结果：//I'm Hello World [url=][/url]

JS代码四：

[url=][/url]
String.prototype.firstUpperCase = function(){    let arr = this.split(' ');    let result = '';    arr.forEach((val) => {        result += `${val[0].toUpperCase()}${val.slice(1)} `;    })    return result;}//结果：//I'm Hello World [url=][/url]

注：
\b：匹配一个单词边界，也就是指单词和空格间的位置。例如， 'erb' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
\w：匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
*：匹配前面的子表达式零次或多次。例如，zo 能匹配 "z" 以及 "zoo"。 等价于{0,}。
\s：匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ fnrtv]。
\S：匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。

---

作者: 梦缠绕的时候    时间: 2019-9-3 08:35
有任何问题欢迎在评论区留言

---

作者: 梦缠绕的时候    时间: 2019-9-3 08:36
或者添加学姐微信
DKA-2018

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2