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 相关文章推荐
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
javaScript封装的各种写法
Aug 14 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 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学习笔记之一
2011/01/17 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
js 判断 enter 事件
2009/02/12 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python转换摩斯密码示例
2014/02/16 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
python多维数组分位数的求取方式
2020/03/03 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
校三好学生主要事迹
2014/01/11 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书