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的三种$()
Dec 30 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
JS实现打字游戏
Dec 17 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php ci框架验证码实例分析
2013/06/26 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
javawscript 三级菜单的实现原理
2009/07/01 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
21行Python代码实现拼写检查器
2016/01/25 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
投诉信回复范文
2015/07/03 职场文书
优秀大学生申请书
2019/06/24 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书