SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to convert all UPPERCASE literals to all MixedCase literals

    Hi All - We have a system that creates web pages over which we have no control. But we DO have the ability to insert JavaScript into the web-page PRIOR to the web page actually displaying. (By the way, the User will always be using Internet Explorer as their browser.) The web pages create HTML Forms. The form field labels are always UPPERCASE. We would like to *automate* the changing of those literals so that they are always MixedCase. So is there any way to - in effect - create some JavaScript routine that we insert into every web page to scan and replace these literals - so that the User will only see MixedCase labels - instead of UPPERCASE labels? Thanks very much for any ideas about how to do this!
    Rex

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This would be quite simple except that if you have a word like MIXEDCASE that you want converting into MixedCase (what is commonly called Camel Case) then it is impossible to know that it is the "C" that should be kept in uppercase and not any of the other letters - unless you have a list of words for comparison.

    Assuming this is not the case and we are dealing simply with words separated by spaces, you first need to get all the labels into a collection, e.g. by using getElementsByTagName. Then cycle through them and change case:
    Code Javascript:
    function firstLetterUpper() {
      var labels = document.getElementsByTagName('label');
      for (var i = 0; i < labels.length; i++) {
        var labelbits = labels[i].firstChild.nodeValue.split(' ');
        for (var j = 0; j < labelbits.length; j++) {
          labelbits[j] = labelbits[j].substring(0, 1) + labelbits[j].substring(1).toLowerCase();
        }
        labels[i].firstChild.nodeValue = labelbits.join(' ');
      }
    }
     
    window.attachEvent('onload', firstLetterUpper);
    Haven't tested it but it ought to work.

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: UPPERCASE to MixedCase

    Hi Raffles - Thank you so much! (And your point about identifying the C inside the MixedCase word is helpful - I think we will create an array of exception phrases.) I will test it sometime over the next few days. I really appreciate you taking the time to help me.
    Rex

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You might be better off hard-coding it like this:
    Code:
    var words = {
      'PRODUCTS': 'Products',
      'BIGTHINGS': 'BigThings',
      'STUFF': 'Stuff'
    };
    var labels = document.getElementsByTagName('label');
    for (var i = 0; i < labels.length; i++) {
      labels[i].firstChild.nodeValue = words[labels[i].firstChild.nodeValue];
    }

  5. #5
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    exception list

    Hi Raffles - I am a newbie to JavaScript. I suspect this exception list will end up being about 1000 items. I really appreciate the code you just sent - Is that the way you'd recommend we do it when we have so many exception items?
    Rex

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If it's going to be that long, then you're better off with the "automated" version above. Perhaps you could just have an exception list for the ones that fall into the BIGTHINGS -> BigThings category. The automated code will work fine with BIGTHINGS -> Bigthings and with BIG THINGS -> Big Things but will fail to convert BIGTHINGS into BigThings - it will produce Bigthings. So, perhaps you should just create an exception list for the latter cases.

  7. #7
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes - We will definitely have the automated routine and that other list would ONLY contain the exception items that the automated routine mishandles. I think I probably overstated the number of exception items, but it is still a long list - maybe 500 items (This one automated function would be for a system of maybe 300 mainframe screens, so - to keep it simple - we would want to create a .js file that could handle all cases for all 300 screens. I know we could create multiple .js files but at this point in time I believe we will take the simplest approach - just creating 1 or just a few .js files. By the way, do you happen to know how Javascript/IE does the following - Specifically, if this .js file were 10K, I assume Internet Explorer would download it *every* time for every web page - even though it is the same exact file????
    Thanks again, Raffles,
    Rex

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No, IE would cache it, as long as the URI to the .js file in the "src" attribute of the SCRIPT element stays the same (normally the only reason it would change is if you are trying to avoid caching it).

    What you need to do is find something common to all the pages where you want to do this, for instance a DIV or FORM containing all these form controls:
    HTML Code:
    <div id="productselection">
      <label for="name">NAME</label><input id="name" type="text">
      <label for="age">AGE</label><input id="age" type="text">
    </div>
    Then you can access each label by doing:
    Code:
    var labels = document.getElementById('productselection').getElementsByTagName('label');

  9. #9
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very good - I see what you're doing there. We're going to go through this issue (and your extremely helpful ideas) over the next few weeks. You might see us posting some follow-up questions. But again - thank you so much, Raffles - for your very on-target assistance.
    Rex

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    My pleasure.

  11. #11
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry- mispost

  12. #12
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles - I just found out that the text - the labels - that are within the Form will NOT have a form type of label. They will simply be free-form text (but still within the Form area). So my algorithm will have to be more sophisticated. My question for you is: Instead of doing "document.getElementsByTagName('label')" do you have any idea regarding what might I do to fetch ALL the data that is found inside the Form area...? Thanks, Raffles,
    Rex

  13. #13
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    As long as there's a pattern of some sort, it's possible. I would have to see the HTML (or a sample of it) to be able to go any further than this, though.

  14. #14
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I see where a sample would be helpful. Unfortunately, I don't have a sample right now. I think at some point I will post a NEW thread that addresses this issue. Thanks, Raffles,
    Rex

  15. #15
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles - Can you or anyone help with the following: Why does the following always show "aaa" in the webpage instead of "bbb"? (Clearly there is something wrong with setting the value of outerText... The FIRST alert shows but the SECOND does not.) Thanks!
    <html>
    <head>
    </head>
    <body>
    <script type="text/javascript" language="javascript">
    function myTest() {
    alert (document.body.outerText);
    document.body.outerText = "bbb";
    alert (document.body.outerText);
    }
    window.attachEvent('onload', myTest);
    </script>
    aaa
    </body>
    </html>

  16. #16
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind. What I needed was to use innerHTML. Issue resolved.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •