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 使用手册(四)
Sep 23 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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配置文件中最常用四个ini函数
2007/03/19 PHP
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
用javascript实现页面打印的三种方法
2007/03/05 Javascript
js jquery做的图片连续滚动代码
2008/01/06 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
详解Vue之父子组件传值
2019/04/01 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
js里面的变量范围分享
2020/07/18 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
介绍一下游标
2012/01/10 面试题
派出所所长先进事迹
2014/05/19 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
借款协议书
2014/09/16 职场文书
公司内部升职自荐信
2015/03/27 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
详解Js模块化的作用原理和方案
2021/04/29 Javascript
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers