Converting a String to Upper Case | Learn How to Program Using Any Web Browser

Suppose you want to check the user input in a text field to make sure it’s a specified string. For that matter, you might also need to check the opposite—that it isn’t a specified string.

In this situation, it’s helpful to convert the input string to all upper case. (You could also use all lower case just as well. The important thing is that you don’t have to worry about variation in cases.) If you don’t convert the strings all to one case, you have to worry about things such as the string Lawyer not being equal to lawyer. So, the way to get around this is to convert the strings all to one case before you do the comparison.

Converting to all upper, or all lower, case is easy with the String object’s toUpperCase and toLowerCase methods.

Note

This isn’t a politically correct example. It’s just intended for fun. Please believe me when I say that I have no desire to offend anyone!

As a perhaps somewhat silly example, suppose Saint Peter at the Pearly Gates has designed an HTML form to weed out lawyers so that they can’t enter heaven. Because Saint Peter has magical powers, he can be sure that all lawyers will enter their profession in the HTML form as either attorney or lawyer. But—for whatever reason—he can’t be sure that the supplicants before the gate won’t vary the case of their entry to try and sneak past him. This means that he needs to write a program that converts the user’s input to all upper case and makes sure it’s not equal to ATTORNEY or LAWYER.

Tip

The program could just as well convert the input to all lower case and check to make sure that it’s not equal to attorney or lawyer.

To Convert an Input String to All Upper Case for the Purpose of Comparison:

Create an input form containing the field for the value you want to compare (see Listing 9-2 for the Pearly Gates sample).

Listing 9.2: Converting Strings to Upper Case

 <HTML> <HEAD> <TITLE>Validate</TITLE> <SCRIPT>  function checkLawyer(str) {     if ((str.toUpperCase() == "LAWYER") ||           (str.toUpperCase() == "ATTORNEY"))           alert ("Lawyers are not wanted here...");     else        alert("Your application will be evaluated!");  }  </SCRIPT> </HEAD> <BODY> <H1>  Pearly Gates Admission Form!  </H1>  Note: Fields marked with an asterisk (*) are required.  Saint Peter will know if you lie.  <FORM name="theForm"> <TABLE> <tr> <td>  Enter Your First Name (*):  </td> <td> <INPUT type=text name="userFname"> </td> <td> </tr> <tr> <td>  Enter Your Last Name (*):  </td> <td> <INPUT type=text name="userLname"> </td> <td> </tr> <tr> <td>  Enter Your Profession (*):  </td> <td> <INPUT type=text name="userProf"> </td> <td> </tr> <tr> <td>  Enter Your City:  </td> <td> <INPUT type=text name="userCity"> </td> </tr> <tr> <td colspan=2> <INPUT type=button name="theButton" value="SUBMIT QUERY"     onClick="checkLawyer(window.document.theForm.userProf.value)";> </td> </tr> </TABLE> </FORM> </BODY> </HTML>

Name the Profession text input userProf. The toUpperCase() method will be used to check that the user doesn’t enter lawyer, attorney, or a mixed-case version of either in the Profession field.

Add a button that invokes a function to check the field, passing the userProf text field as a parameter:

 <INPUT type=button name="theButton" value="SUBMIT QUERY"  onClick="checkLawyer(window.document.theForm.userProf.value)";>

Write the checkLawyer function to compare the input in a caseneutral fashion:

 function checkLawyer(str) {     if ((str.toUpperCase() == "LAWYER") ||           (str.toUpperCase() == "ATTORNEY"))           alert ("Lawyers are not wanted here...");     else        alert("Your application will be evaluated!");  }

Save the page shown in Listing 9-2 and open it in a browser. If the user enters lawyer or attorney for a profession, the comparison works no matter how idiosyncratic the capitalization that’s used (see Figure 9-2).

Figure 9-2: No lawyer will make it past Saint Peter by varying the case in a text string!