0

I have a text that is written in uppercase. Example:

THIS IS UPPERCASE

What I want is to make it look like this (capitalize it):

This Is Uppercase

I just found out I cannot do it with CSS since text-transform: capitalize only works on the first letter, so the output is still:

THIS IS UPPERCASE

Is there any way with jquery to achieve this effect?

EDIT:

This is my HTML code:

<div class="badge">
<div class="participant">NAME SURNAME</div>
</div>

NAME and SURNAME are dynamic variables, but some of the data is written in UPPERCASE, some is written in lowercase and some is written in Capitalize. I just want to uniform the names with Capitalize, possibly including the javascript in my html file, but I have trouble capitalizing strings written in uppercase.

aliengirl a.k.a. alien no.155
  • 123
  • 2
  • 11
  • I took a look at the other question and it does not solve my issue. – aliengirl a.k.a. alien no.155 Feb 09 '18 at 17:37
  • You asked for jQuere, here you go: var makeLowerCase = function() { jQuery( this ).text( jQuery( this ).text().toLowerCase() ); }; jQuery( '.participant' ).each( makeLowerCase ); I don't know how you 'dynamically set your value. But you need to add the makeLowerCase function every time you change. E.g. jQuery( '.participant' ).text( 'bRUCE WAYNE').each( makeLowerCase ); – chrisbergr Nov 22 '18 at 14:05
  • Of course you need the css – chrisbergr Nov 22 '18 at 14:06

3 Answers3

0

Try this function

function capitalize(str){
        var val = str,
        substr = val.split(' '),
        returnVal = [];

        substr.forEach(function(val){
            returnVal.push(val.charAt(0).toUpperCase()+val.slice(1));
        });

    return returnVal.join(' ');
}
mirwaleed
  • 69
  • 7
0

Yes, CSS or CSS3 will not be helpful here, you can achieve it in JavaScript.

You can do it this way :

window.onload = function(){
  var elements = document.getElementsByClassName("every-word")
  for (var i=0; i<elements.length; i++){
    elements[i].innerHTML = elements[i].innerHTML.replace(/\\b([a-z])([a-z]+)?\\b/gim, "<span class='first-letter'>$1</span>$2")
  }
}

Your HTML will be :

<style>
  .first-letter {
    text-transform: capitalize;
  }
</style>
<p class="every-word">THIS IS UPPERCASE</p>

This will give you output :

This Is Uppercase
Rohan Kadu
  • 1,311
  • 2
  • 12
  • 22
  • I tried this: `
    NAME SURNAME
    ` but it does not work. The javascript does not create the span..     – aliengirl a.k.a. alien no.155 Feb 09 '18 at 17:40
  • Are you changing your name after page gets loaded ? Or they are added in that place during page load ? – Rohan Kadu Feb 11 '18 at 05:51
  • they were added during the page load with server request .. but I couldn't solve this in time and now it does not matter anymore. superficial and incompetent moderator. it was NOT a duplicate and it did NOT have the answer in that other question. – aliengirl a.k.a. alien no.155 Feb 15 '18 at 10:21
  • You can move this code in a method and call this method when your text is loaded and then this code will format your text data. – Rohan Kadu Feb 15 '18 at 10:40
0

const str = "THIS IS UPPERCASE";

const tc = str.replace(/(\w)+/g, w =>
  w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()
);

console.log( tc )
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313