js实现英文首字母大写(附css首字母大写的写法)

发布时间:2020-10-06编辑:脚本学堂
js实现英文首字母大写并不难,这里介绍三种js实现首字母大写的方法,大家可以做下比较,另外还提供了一个css实现的首字母大写的例子,用css实现首字母大写在页面体验上更好。

首字母大写:
js与css实现首字母大写的多个方法

一、js首字母大写

方法1(js首字母大写):
 

复制代码 代码示例:

function replaceStr(str){ // 正则法
 str = str.toLowerCase();
 var reg = /b(w)|s(w)/g; //  b判断边界s判断空格
 return str.replace(reg,function(m){
  return m.toUpperCase()
 });
}

function replaceStr1(str){
 str = str.toLowerCase();
 var strTemp = ""; //新字符串
 for(var i=0;i<str.length;i++){
  if(i == 0){
   strTemp += str[i].toUpperCase(); //第一个
   continue;
  }
  if(str[i] == " " && i< str.length-1){ //空格后
   strTemp += " ";
   strTemp += str[i+1].toUpperCase();
   i++;
   continue;
  }
  strTemp += str[i];
 }
  return strTemp;
 }

//调用:
var text = "abcd ABCD efGH";
console.log(replaceStr(text));//Abcd Abcd Efgh
console.log(replaceStr1(text));//Abcd Abcd Efgh

方法2(js首字母大写):
 

复制代码 代码示例:
<script type="textjavascript">
function ucfirst(str){
var str = str.toLowerCase();
var strarr = str.split(' ');
var result = '';
for(var i in strarr){
result += strarr[i].substring(0,1).toUpperCase()+strarr[i].substring(1)+' ';
}
return result;
}
</script>

方法3(js首字母大写):
 

复制代码 代码示例:
<script type="textjavascript">
function ucfirst(str) {
var str = str.toLowerCase();
str = str.replace(/bw+b/g, function(word){
  return word.substring(0,1).toUpperCase()+word.substring(1);
});
return str;
</script>

二、css实现首字母大写

例子:
 

复制代码 代码示例:
<html>
<head>
<style type="text/css">
 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 An H1 Element</h1>
<p class="uppercase">This is a test.</p><p class="lowercase">This is a test.</p><p class="capitalize">This is a test.</p>
</body>
</html>