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 location几个方法小姐
Jul 09 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
Vue实现移动端拖拽交换位置
Jul 29 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
php Ajax乱码
2008/04/09 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
JS中Iframe之间传值的方法
2013/03/11 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
通过Pandas读取大文件的实例
2018/06/07 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
师德建设实施方案
2014/03/21 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
授权委托书样本
2014/09/25 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android