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 中的 call 和 apply使用介绍
Feb 22 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
Array.filter中如何正确使用Async
Nov 04 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实现短域名互转
2013/07/05 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
python实现XML解析的方法解析
2019/11/16 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
python实现图片素描效果
2020/09/26 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
商务宴会祝酒词
2015/08/11 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
粗暴解决CUDA out of memory的问题
2021/05/22 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
HttpClient实现表单提交上传文件
2022/08/14 Java/Android