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>

Answer 2

您可以轻松实现此目标。使用CSS： plateSlogan.style.textTransform = "capitalize";

或者，如果您使用的是jQuery，则可以使用函数.css

如何使用jQuery将标题案例文本输出到HTML字段

2 个答案: