首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用jquery将标题大小写文本输出到html字段

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

Stack Overflow用户
提问于 2018-07-27 04:32:55
回答 2查看 849关注 0票数 1

我使用下面的jQuery允许用户在文本字段中输入一些文本,然后在屏幕上的某个div中的其他位置呈现这些文本。

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

代码如下:

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

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

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

});

我认为我需要使用RegExp,但我发现在这个场景中尝试实现它很困难。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-27 04:37:26

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

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>

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

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>

票数 2
EN

Stack Overflow用户

发布于 2018-07-27 04:38:04

您可以更容易地实现此目标。使用CSS:plateSlogan.style.textTransform = "capitalize";

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51547105

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档