CODEWITHSUNDEEP
javascriptcss
Shijin TR
Shijin TR

Reputation: 7768

Get text using jquery with text-transform

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>

Upvotes: 3

Views: 1716

Answers (3)

Sheepy
Sheepy

Reputation: 18005

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.

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41832

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

Upvotes: 0

BenG
BenG

Reputation: 15154

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>

Upvotes: 4

Related Questions