javascript - 如何使用 jquery 将标题大小写文本输出到 html 字段中

Question

我正在使用以下 jQuery 来允许用户在文本字段中输入一些文本，然后在 div 内的屏幕上的其他地方呈现该文本。

我能够让文本以大写和小写呈现，但我不太确定如何让它以标题大小写或两种情况的混合呈现。

这是代码:

jQuery('#fhc-sloganText').keyup(function() {

    var plateSlogan = document.getElementById("plateSlogan");

    plateSlogan.innerHTML = this.value.toLowerCase();

});

我认为我需要使用 RegExp，但我发现很难在这种情况下尝试实现它。

Answer 1

您可以使用此函数将字符串中的每个单词大写。

function toTitleCase(str){
  return str.replace(/\b\w/g, l => l.toUpperCase());
}

#plateSlogan{
  height: 50px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fhc-sloganText"/>
<p/>
<div id="plateSlogan"></div>
<script>
jQuery('#fhc-sloganText').keyup(function() {

    var plateSlogan = document.getElementById("plateSlogan");

    plateSlogan.innerHTML = this.value.replace(/\b\w/g, l => l.toUpperCase());

});
</script>

您可以使用此函数将字符串中的第一个单词大写>

function capitalizeFirstLetter(str) {
   return str.charAt(0).toUpperCase() + string.slice(1);
}

#plateSlogan{
  height: 50px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fhc-sloganText"/>
<p/>
<div id="plateSlogan"></div>
<script>
jQuery('#fhc-sloganText').keyup(function() {

    var plateSlogan = document.getElementById("plateSlogan");

    plateSlogan.innerHTML = this.value.charAt(0).toUpperCase() + this.value.slice(1);

});
</script>