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高亮效果的二种实现方法
Sep 14 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
React 父子组件通信的实现方法
Dec 05 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调用mysql存储过程
2007/02/14 PHP
PHP 数组入门教程小结
2009/05/20 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
accesskey 提交
2006/06/26 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
深入理解Django的自定义过滤器
2017/10/17 Python
浅谈python迭代器
2017/11/08 Python
python中的随机函数random的用法示例
2018/01/27 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
小学少先队活动方案
2014/02/18 职场文书
报告会主持词
2014/04/02 职场文书
大学毕业寄语大全
2014/04/10 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
详解redis分布式锁的这些坑
2021/05/19 Redis
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
python自动化八大定位元素讲解
2021/07/09 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技