Get text using jquery with text-transform

Question

I have an html element and i toggle its class and show capital/small letters with text-transform.

Is it possible to get the text its 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>

not sure what exactly you want to do. get uppercased text from #char ? — LorDex
– LorDex, Commented Apr 29, 2016 at 9:34
when i press "Toggle case" button, the case changes to upper/lower.i need to get the data as shown. — Shijin TR
– Shijin TR, Commented Apr 29, 2016 at 9:35
Good question. Is it critical for you that the capitalisation be done with CSS? Why not do the whole thing in JS, since this seems like a functional issue rather than a design one? — Shovalt
– Shovalt, Commented Apr 29, 2016 at 9:37

BenG · Accepted Answer · 2016-04-29 09:46:23Z

4

you can check for the class and use toUpperCase:-

$('#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
});

.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>

edited Apr 29, 2016 at 9:46

answered Apr 29, 2016 at 9:36

BenG

15.2k5 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shovalt Over a year ago

I would only change one thing - I'd make the text value itself change when clicking toggle case, instead of using CSS for the display. It seems more function oriented that way.

BenG Over a year ago

@Shovalt What if the text has a combination of both upper and lower case?

Shovalt Over a year ago

Oh, so then when it's in lower mode it allows mixed case, and in upper only upper case? Yeah, good point, in that case CSS definitely makes things easier. I wonder if that's what he intended.

Sheepy · Accepted Answer · 2016-04-29 10:40:23Z

There is currently no way to get the rendered text with JavaScript.

When you are using English, toUpperCase and toLowerCase works well for the CSS value uppercase and lowercase.

But when you need it for non-English, or when you use capitalize, full-width etc., you have to reproduce the CSS logic (mostly unicode logic) with JS.

Below is a few rules that Firefox is doing. Chrome also knows some of them.

In German (de), the ß becomes SS in uppercase.
In Dutch (nl), the ij digraph becomes IJ, even with text-transform: capitalize, which only put the first letter of a word in uppercase.
In Greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ).
And so on...

It's also fun when you need to apply other CSS values:

capitalize - What constitutes a "word"? How do browsers split iPhone-6s+? Behold, Unicode consortium to the rescue!
full-width - The MDN example looks easy, but it does not show them all, for example [] to ［］, and maybe someday they will convert ... to … instead of ...
full-size-kana - How's your Japanese? No worry, this CSS4 proposals is dropped - in preference of a (future) fully customisable character mapping rules! Hope your CSS parser skill is up to par.

So, count yourself lucky if you use only English. You have my consolation if you, like me, work with multilingual systems. Timezone is nothing at all.

Mr_Green · Accepted Answer · 2016-04-29 09:55:26Z

0

Maybe like this?

// Store css to javascript values in this object
var textTypes = {
  "uppercase": "toUpperCase",
  "lowercase": "toLowerCase"
}

// get the element
var div = document.getElementsByTagName('div')[0];

// get the computed style type
var type = window.getComputedStyle(div)['text-transform'];

// print the transformed text
console.log(div.innerHTML[textTypes[type]]());

Working Fiddle

edited Apr 29, 2016 at 9:55

answered Apr 29, 2016 at 9:44

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Collectives™ on Stack Overflow

Get text using jquery with text-transform

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related