使用带有text-transform的jquery获取文本

时间:2016-04-29 09:33:10

标签: javascript css

我有一个html元素,我toggle的类,并显示text-transform的大写/小写字母。

是否可以将文本设为text-transform

$('#toggle').click(function(){
  $('#char').toggleClass('upper');
});

$('#getdata').click(function(){
  var text = $('#char').text();
  alert(text);  /// here i need to get the actual word with capital/lower i selected
});
.upper{
 text-transform:uppercase;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span contenteditable="true" id="char">a</span>
<br/>
<button id="toggle">Toggle case</button>
<button id="getdata">gat data</button>

3 个答案:

答案 0 :(得分:4)

您可以查看课程并使用toUpperCase: -

&#13;
&#13;
$('#toggle').click(function(){
  $('#char').toggleClass('upper');
});

$('#getdata').click(function(){
  var $char = $('#char');
  var text = $char.hasClass('upper') ? $char.text().toUpperCase() : $char.text();
  alert(text);  /// here i need to get the actual word with capital/lower i selected
});
&#13;
.upper{
 text-transform:uppercase;  
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span contenteditable="true" id="char">a</span>
<br/>
<button id="toggle">Toggle case</button>
<button id="getdata">gat data</button>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

目前无法使用JavaScript获取渲染文本。

当您使用英语时,toUpperCasetoLowerCase适用于CSS值uppercaselowercase

但是当您需要非英语时,或者当您使用capitalizefull-width等时,您必须使用JS重现CSS逻辑(主要是unicode logic)。 / p>

以下是Firefox is doing的一些规则。 Chrome也知道其中一些。

  • 在德语(de)中,ß以大写字母变为SS。

  • 在荷兰语(nl)中,ij有向图变为IJ,即使使用text-transform:capitalize,也只是将单词的第一个字母用大写。

  • 在希腊语(el)中,当整个单词为大写(ά/Α)时,元音会失去重音,除了析取的eta(ή/Ή)。此外,第一个元音上带有重音的双元音失去了重音并在第二个元音上获得了分音(άι/ΑΪ)。

  • 依旧......

当您需要应用其他CSS值时,它也很有趣:

  • capitalize - 什么构成“字”?浏览器如何拆分iPhone-6s+?看,Unicode联盟to the rescue
  • full-width - MDN示例看起来很简单,但它并未全部显示,例如[][],也许有一天他们会将...转换为{ {1}}代替
  • ... - 你的日语怎么样?不用担心,这个CSS4提案被删除 - 优先于(未来)完全可自定义的字符映射规则!希望您的CSS解析器技能达到标准。

所以,如果你只使用英语,那就算是幸运。如果你像我一样使用多语言系统,你会得到我的安慰。时区根本不算什么。

答案 2 :(得分:0)

也许是这样的?

          CHAR CODE (OCTAL)
CHAR NAME  STD MAC WIN PDF
...
     space 040 040 040 040
...

<强> Working Fiddle