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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
Javascript 解构赋值详情
Nov 17 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 adodb分页实现代码
2009/03/19 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python标准库与第三方库详解
2014/07/22 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
Python实现汇率转换操作
2020/05/03 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
化学实验员岗位职责
2013/12/28 职场文书
商务助理求职信范文
2014/04/20 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
2016七夕情人节感言
2015/12/09 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python