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 相关文章推荐
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
解读Vue组件注册方式
May 15 Vue.js
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中数据操作案例分析
2015/09/27 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Python跳出多重循环的方法示例
2019/07/03 Python
利用Python实现kNN算法的代码
2019/08/16 Python
详解Python self 参数
2019/08/30 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
C语言编程练习
2012/04/02 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
应聘护士自荐信
2013/10/21 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang