javascript 实现英文首字母大写

实现 javascript 英文首字母大写有多种方法，这里分别介绍了 css 与 js 的实现方式，但主要以 js 为重点。实际开发中，越简单明了越好，css 方式最为直观简单。

css 实现方式

首先介绍 css 实现的方式。

<html><head><style>h1 { text-transform: uppercase }p.uppercase { text-transform: uppercase }p.lowercase { text-transform: lowercase }p.capitalize { text-transform: capitalize }</style></head><body><h1>This Is A H1 Element.</h1><p class="uppercase">THIS IS UPPERCASE</p><p class="lowercase">this is lowercase</p><p class="capitalize">This Is Capitalize</p></body>
</html>

javascript 实现方式

思路一：【截取首字符并拼接其他字符】使用正则匹配字符串，截取首字符，转为大写后与其他字符拼接起来。

function upperFirstConcat(str) {let str = str.toLowerCase()str = str.replace(/\b\w+\b/g, word => {return word.substring(0,1).toUpperCase + word.substring(1)})return str
}

思路二：【只处理首字符】使用正则匹配字符串，只针对首字符转大写 —— 包括空格后面字符串的首字符，其他字符不做处理。

function upperFirst(str) {str = str.toLowerCase()return str.replace(/\b\w|\s\w/g, fw => {return fw.toUpperCase()})
}

思路三：【数组遍历】以空格为分界将字符串打散为数组，遍历数组得到每个单字符串，截取首字符并拼接其他字符，并保存在新变量中返回。

拼接时注意加上空格 (‘ ’)。

function toArrayUpperFirst(str) {str = str.toLowerCase()let arr = str.split(' ')let res = ''for (let i in arr) {res += arr[i].substring(0,1).toUpperCase() + arr[i].substring(1) + ' '}return res
}

思路四：【字符串遍历并判断空格】直接遍历字符串，取得下标为 0 的字符并转换为大写，继续遍历，若得到空格，则将当前空格后的字符转换为大写，整个过程都进行拼接，最终将拼接的结果保存在新变量中返回。

function strListToUpperFirst(str) {str = str.toLowerCase()let res = ''for (let i = 0; i < str.length; i++) {if (i == 0) { // 首字符res += str[i].toUpperCase()}// 遍历主体if (i > 0 && str[i] == ' ' && i < str.length - 1) { // 空格后res += ' 'res += str[i+1].toUpperCase()i++ // 必须放在这，因为这里是遍历主体}res += str[i] // 不管上面的处理是怎样的，原则上所有的字符都要被拼接到 res 上}return res
}var text = "abcd ABCD efGH"
console.log(strListToUpperFirst(text))

通过以上几种方式，基本可以解决首字母大写的应用场景。这几个 js 实现方式的最终效果是一致的，但代码量却不同，而且不管是单个字符串，还是用空格隔开的多个单字符串组成的长字符串，用以上几个方法都可以实现。也就是说，在匹配的过程中，空格会自动被判断并将其后的首字符转换为大写。

那么，实际上思路 1 的逻辑最简单常见，思路 2 的代码量最少，而思路 4 最完全。

javascript 实现英文首字母大写相关推荐

html5首字母大小写,css中如何设置英文首字母大写
css中可使用text-transform属性来设置英文首字母大写.text-transform属性可控制文本的大小写,只需要给包含英文字母文本的元素设置"text-transform:ca ...
把中文目录名称修改成英文首字母大写或中文拼音目录
把中文目录名称修改成英文首字母大写或英文目录 <dependency><groupId>cn.hutool</groupId><artifactId>h ...
css 首字母,css如何设置英文首字母大写
我们经常在英文报纸上看到首个单词大写,那么单词首字母大写如何设置,可能很多人遇到这种问题都不知道怎么操作,下面我们来讲解一下css如何设置英文首字母大写? 实现英文首字母大写可以使用div+css,d ...
WPS取消英文首字母大写
WPS编辑文档时,有时需要编写代码,此时不需要设置英文首字母大写,可以通过如下方式取消. 1.点击左上角"WPS文字"->选项 --> 编辑 2.在"自动更正 ...
excel 中文转英文首字母大写，数据透视表制作，字符串分割方法
1.中文转英文首字母大写,我的excel是2007版本的, 把下面的代码复制到宏模板里面,然后直接关闭就好了 Function getpychar(char) tmp = 65536 + Asc(ch ...
javaScript实现字符串首字母大写
(function(){ var stringUtils = { //TODO 单词首字母大写 initCap : function( param ){ param = param || " ...
JavaScript实现单词首字母大写的方法集锦
1.for循环实现之 var a = 'Hi, my name\'s Han Meimei, a SOFTWARE engineer'; //for循环 function titleCase(s) { ...
visio取消英文首字母大写
1.打开visio,然后点击"文件" 2.出现的界面中,点击"选项" 3.出现的界面一次点击"校对","自动更正选项(A)&quo ...
excel小写转大写公式_英文首字母大写，你还在手动切换大小写输入吗？
最近,小编整理了一份相对冷门却很简单的excel函数,今天特意分享给大家函数1:英文字母全部以小写显示如下图,在G列输入公式,让英文字母全部以小写显示.用[LOWER]函数即可解决,公式如G列. ...
JavaScript中实现首字母大写，小写
使用JavaScript自带的方法 toLowerCase() 全部字母小写: toUpperCase() 全部字母大写: 思路:使用 replace()方法获取到字符串第一个字符,再将获取到的字符变 ...

javascript 实现英文首字母大写

css 实现方式

javascript 实现方式

javascript 实现英文首字母大写相关推荐

最新文章

热门文章