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 数组排序函数
Aug 20 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
Node对CommonJS的模块规范
Nov 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python中 logging的使用详解
2017/10/25 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Python类如何定义私有变量
2020/02/03 Python
Python API len函数操作过程解析
2020/03/05 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
大学应届毕业生求职信
2014/05/24 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
语文教师个人工作总结
2015/02/06 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
高中家长意见怎么写
2015/06/03 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python
JS 基本概念详细介绍
2021/10/16 Javascript
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android