Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript convert uppercase to lowercase and vice-versa

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #251581
    Pranab
    Participant

    here’s the link – https://jsfiddle.net/vLmqd35v/

    <input type="text"/>
    <p></p>
    
    
    var inp = document.querySelector("input");
    inp.addEventListener("input", text);
    
    function text(){
      var p = document.querySelector("p");
      var s = inp.value;
      if(!s.match(/A-Z/i)) p.innerHTML = s.toUpperCase();
      else p.innerHTML = s.toLowerCase;
    }
    
    

    this is convert lower to upper..but how to convert upper to lower?

    #251586
    bearhead
    Participant

    change function text() to:

    function text(){
      var p = document.querySelector("p");
      var s = inp.value;
      if(!s.match(/a-z/i)) p.innerHTML = s.toLowerCase();
      else p.innerHTML = s.toUpperCase;
    }
    

    Basically just invert what the original function was doing…

    #251587
    Pranab
    Participant

    thanks for the answer @bearhead ..now, how do execute both in text function..i mean when i input some value in text field..it will automatically convert upper to lower and lower to upper..

    #251589
    bearhead
    Participant

    It will be a little more complicated:
    http://codepen.io/kvana/pen/egoKXb

    #251636
    Pranab
    Participant

    thanks again @bearhead ..is it possible to execute without any loop?

    #251637
    bearhead
    Participant

    I doubt it, the function needs to loop through the input’s value every time it changes… Why don’t you want to have a loop in the script?

    #252909
    Mottie
    Member

    @bearhead The embedded codepen doesn’t appear to be available anymore. Would you please paste the code into the answer?


    @Pranab
    If you don’t want a loop, use the replace function instead:

    https://jsfiddle.net/Mottie/vLmqd35v/1/

    var inp = document.querySelector("input");
    inp.addEventListener("input", text);
    
    function text(){
      var p = document.querySelector("p");
      var s = inp.value.trim();
      var lc = /[a-z]/;
      p.innerHTML = s.replace(/./g, function(v){
        return lc.test(v) ? v.toUpperCase() : v.toLowerCase();
      });
    }
    
    #252910
    Mottie
    Member

    Update: There is a limitation of the above code… lower-case letters with diacritics will not be modified. You would need to include all lower case unicode characters, which isn’t as simple as it sounds because you can’t add a simple range into the regular expression because upper & lower case letters alternate (ref).

    Here is a demo that includes a lesser subset of diacritics which only requires the change of this line:

    var lc = /[a-zàèìòùáéíóúýâêîôûãñõäëïöüÿçßøåæœ]/;
    
    #252960
    bearhead
    Participant

    yeah, sorry I deleted that pen a few day ago… Mottie’s solution looks better anyway.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.