JS/CSS实现字符串单词首字母大写功能


Posted in Javascript onSeptember 03, 2019

css实现:

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拆分成两个部分,导致输出为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;
}
//结果://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;
}
//结果://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;
}
//结果://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]。

总结

以上所述是小编给大家介绍的JS/CSS实现字符串单词首字母大写功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 #Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 #Javascript
layui表格分页 记录勾选的实例
Sep 02 #Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 #Javascript
layui复选框的全选与取消实现方法
Sep 02 #Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 #Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 #Javascript
You might like
ThinkPHP采用模块和操作分析
2011/04/18 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python中字典的基础知识归纳小结
2015/08/19 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
python 操作hive pyhs2方式
2019/12/21 Python
python数据爬下来保存的位置
2020/02/17 Python
python批量修改xml属性的实现方式
2020/03/05 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
事业单位辞职信范文
2014/01/19 职场文书
铲车司机岗位职责
2014/03/15 职场文书
请假条怎么写
2014/04/10 职场文书
文明寄语大全
2014/04/11 职场文书
单位婚育证明范本
2014/11/21 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
使用Java去实现超市会员管理系统
2022/03/18 Java/Android