如何资本化大写书籍的文本

Question

我有一个用大写字母编写的文本。示例：

THIS IS UPPERCASE

我想要的是使它看起来像这样(大写(：

This Is Uppercase

我刚刚发现我无法使用CSS进行，因为文本转换：仅利用第一个字母的作品，因此输出仍然是：

THIS IS UPPERCASE

有什么方法可以实现此效果？

编辑：

这是我的HTML代码：

<div class="badge">
<div class="participant">NAME SURNAME</div>
</div>

名称和姓氏是 Dynamic 变量，但是某些数据是用大写编写的，有些是用小写书写的，有些则用大写字母写成。我只想在HTML文件中统一名称，可能包括JavaScript，但是我很难将字符串用大写。

Answer 1

尝试此功能

function capitalize(str){
        var val = str,
        substr = val.split(' '),
        returnVal = [];
        substr.forEach(function(val){
            returnVal.push(val.charAt(0).toUpperCase()+val.slice(1));
        });
    return returnVal.join(' ');
}

Answer 2

是的，CSS或CSS3在这里无用，您可以在JavaScript中实现它。

您可以这样做：

window.onload = function(){
  var elements = document.getElementsByClassName("every-word")
  for (var i=0; i<elements.length; i++){
    elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2")
  }
}

您的HTML将是：

<style>
  .first-letter {
    text-transform: capitalize;
  }
</style>
<p class="every-word">THIS IS UPPERCASE</p>

这将为您提供输出：

This Is Uppercase

Answer 3

const str = "THIS IS UPPERCASE";
const tc = str.replace(/(w)+/g, w =>
  w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()
);
console.log( tc )