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源码分析-01总体架构分析
Nov 14 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
详解JSON.stringify()的5个秘密特性
May 26 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 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中常用数组处理方法实例分析
2008/08/30 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
wxPython使用系统剪切板的方法
2015/06/16 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
python梯度下降法的简单示例
2018/08/31 Python
python实现批量修改文件名
2020/03/23 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
sort命令的作用和用法
2013/08/25 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
学校教代会开幕词
2016/03/04 职场文书