欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS/CSS实现字符串单词首字母大写功能

程序员文章站 2022-11-23 19:49:35
css实现: text-transform:capitalize; js代码一: string.prototype.firstuppercase =...

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实现字符串单词首字母大写功能,希望对大家有所帮助