如何将大写的文本大写？ [复制]答案

【问题标题】：How to capitalize a text that is written in uppercase? [duplicate]如何将大写的文本大写？ [复制]
【发布时间】：2018-07-20 12:39:51
【问题描述】：

我有一个大写的文本。示例：

THIS IS UPPERCASE

我想要的是让它看起来像这样（大写）：

This Is Uppercase

我刚刚发现我不能用 CSS 做，因为 text-transform: capitalize 只适用于第一个字母，所以输出仍然是：

THIS IS UPPERCASE

jquery有什么办法可以达到这个效果吗？

编辑：

这是我的 HTML 代码：

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

NAME 和 SURNAME 是动态变量，但有些数据是大写的，有些是小写的，有些是大写的。我只想用大写来统一名称，可能包括我的 html 文件中的 javascript，但我无法将大写的字符串大写。

【问题讨论】：

我查看了另一个问题，但它并没有解决我的问题。
你要求 jQuere，给你： var makeLowerCase = function() { jQuery( this ).text( jQuery( this ).text().toLowerCase() ); }; jQuery('.participant').each(makeLowerCase);我不知道您如何“动态设置您的价值”。但是每次更改都需要添加 makeLowerCase 函数。例如。 jQuery('.participant').text('bRUCE WAYNE').each(makeLowerCase);
当然你需要css

标签： jquery css styles

【解决方案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(' ');
}

【讨论】：

我尝试在我的 html 中包含这个 javascript，但它不起作用..

【解决方案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

【讨论】：

我试过这个：<script> window.onload = function(){ var elements = document.getElementsByClassName("participant") 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") } } </script> <style type="text/css"> .first-letter { text-transform: capitalize; } </style> <div class="badge"> <div class="participant">NAME SURNAME</div> </div> 但它不起作用。 javascript不会创建跨度..
你是在页面加载后改名字吗？或者它们是在页面加载期间添加到那个地方的？
它们是在页面加载期间通过服务器请求添加的......但我无法及时解决这个问题，现在它不再重要了。肤浅而无能的版主。它不是重复的，并且在其他问题中没有答案。
您可以将这段代码移动到一个方法中，并在加载文本时调用该方法，然后这段代码将格式化您的文本数据。

【解决方案3】：

const str = "THIS IS UPPERCASE";

const tc = str.replace(/(\w)+/g, w =>
  w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()
);

console.log( tc )

【讨论】：