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 相关文章推荐
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
小程序实现筛子抽奖
May 26 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
php生成zip文件类实例
2015/04/07 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
python使用magic模块进行文件类型识别方法
2018/12/08 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python Tornado框架的使用示例
2020/10/19 Python
pycharm永久激活超详细教程
2020/10/29 Python
意大利男装网店:Vrients
2019/05/02 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
2014年教师节活动总结
2014/08/29 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
初三语文教学计划
2015/01/22 职场文书
八达岭长城导游词
2015/01/30 职场文书
项目验收申请报告
2015/05/15 职场文书
收入证明申请书
2015/06/12 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL