javascript實現(xiàn)英文首字母大寫

2024-05-06 16:18:39

字體：大中小

供稿：網(wǎng)友

本文給大家總結(jié)了幾種可以實現(xiàn)英文首字母大寫的javascript腳本，另附上一個CSS的實現(xiàn)方法，非常的簡單實用，這里推薦給大家，有需要的小伙伴可以參考下。

方法一：

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

方法二：

<script type="text/javascript">

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>

方法三：

<script type="text/javascript">

function ucfirst(str) {

var str = str.toLowerCase();

str = str.replace(//b/w+/b/g, function(word){

return word.substring(0,1).toUpperCase()+word.substring(1);

});

return str;

</script>

CSS來實現(xiàn)：

<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>