o    Throughout your use of JavaScript in a production environment, you will often use it to read values from variables, and alter a behaviour based on what it finds.

o   We have already seen some basic string reading in the section on comparisons where we test for equality. However, this allor-nothing approach is often not subtle enough for our purposes.

o   Take the case where we want to check a user’s name against a list of known users. If the user enters their name as “Karen”, for example, that will be fine if and only if they spell the name precisely as we have it recorded, including capitalisation etc. If the user decides to type in her full name, say “Karen Aaronofsky”, the code will not recognise her.

o   In this case, we want to see if the text “Karen” appears at all in the string. We call this substring searching, and it can be incredibly useful.

o   One of the simplest substring searches is done by using the indexOf method. Every string-type variable has this method associated with it. Consider this code:

      var_1 = “Deepika Sharma”;

      var_2 = var_1.indexOf(“Deepika”);

In this case, the value of var_2 will be 0 – remembering that JavaScript begins counting at 0!

o   If we were to search for a surname here: 

      var_1 = “Deepika Sharma”;

      var_2 = var_1.indexOf(“Sharma”);

      var_2 will have a value of 6.

o   Finally, if the search were to “fail”, so say we searched for the name “Anisa” as a substring, the value of var_2 would then be -1.

o   Note that this is more flexible, but still presents an issue if the user forgets to capitalise any of the substrings that we are searching for – in JavaScript, “Karen” does not equal “karen”.

o   In order to get around this, we might want to ensure that capitalisation is not taken into account. A simple way to achieve this is to force strings into lowercase before the check is performed:

    real_name = “Deepika”; name = prompt(“Your name?”,””);

   real_name = real_name.toLowerCase(); try_name = try_name.toLowerCase();

   if ( try_name.indexOf(real_name) > -1 )

     alert(“Hello Deepika!”);

} else

{

// note we use the original,  // non-lower-cased name here  alert(“Welcome “ + name); }

o   There are a number of string methods we can use to perform “value checks” on strings. A few are printed in the following table:

MethodBehaviour
String.indexOf(“str”)

Returns the numerical position of the first character of the substring “str” in the String

String.charAt(x)

Returns the character at position x in the string – the opposite of indexOf

String.toLowerCase()

Returns a copy of the string with all capital letters replaced by their lowercase counterparts

String.toUpperCase()

Returns a copy of the string with all lowercase letters replaced by their capital counterparts

String.match(/exp/)

Returns true or false based on a regular expression search of the string

o   The final method here deserves some comment. What is a regular expression?

o   A regular expression is a standard way of writing down a “pattern” of characters that is easily recognisable. For example, consider a typical email address:

                   jonathan@relativesanity.com

o   An email address follows a “pattern” which makes it instantly recognisable as an email address to a human. Wouldn’t it be handy if we could define that pattern in JavaScript for a browser to use? Regular expressions allow us to do just that.

o   Let’s look at our email address again. We can break it down to a “prototype” email address as follows:

                           [some letters]@[some more letters].[a few more letters]

o   Of course, it’s slightly more complex than that – there are some characters which aren’t allowed to be in certain parts of the email address (no spaces, for example), but this lets you see the idea of breaking this string up into required “chunks”.

o   Now, to convert this to a regular expression. Just as we use quote marks to denote (or “delimit”) string values in JavaScript, to signify a regular expression, we use forward slashes: /. Our email address regular expression might look like this:

            /^.+@.+..+$/

o   This warrants some discussion. Let’s look at this a character at a time:

o   / denotes the start of the regular expression

o   ^ denotes that we want this regular expression to be found at the very beginning of the string we are searching.

o   .+ the dot symbol is used to stand in for any character. The plus signifies we want to find at least one of those. So this is equivalent to our plain-English phrase [some letters].

o   @ this is simply a character – it has no special meaning other than to say we want to find an @ character after at least one character from the beginning of the string.

o   .+ the same as before – at least one more character after the @.

o   . This is interesting. We know that the dot symbol has a special meaning in a regular expression – it means “match any character”. However, here we want to find an actual dot. Unlike @, which has no special meaning, we have to tell JavaScript to ignore the dots special meaning. We do this by preceding it with a backslash, which tells JavaScript to treat the character immediately following it as though it has no special meaning. This is a convention you will come across many times while programming. The net result here is that we want to match a dot after a series of characters.

o   .+ and again, at least one more character after the dot.

o   $ this is the mirror of the ^ at the beginning – this matches the end of the tested string.

o   / tells JavaScript we are at the end of the regular expression..

o   Phew! Lots to consider here. Regular expressions are an arcane art at the best of times, so don’t worry too much if the above code is indecipherable. The important thing to realise at the moment is that we can perform some quite sophisticated pattern recognition in JavaScript without having to resort to checking each individual character of a string multiple times.

The following code checks a variable to see if it looks like an email address:

     var_1 = prompt(“Your email?”, “”);

     if ( var_1.match(/^.+@.+..+$/) )

{

     alert(“valid email address”);

} else {

     alert(“are you sure?”); }

o   There are a few problems with this code at the moment – for example, it will pass the string “-@-.-“ quite happily, which is clearly wrong. We will look at ways around this later on in the course.

Project 

    o   Open your previous project file, and save it under the name chapter_18.html. o Clear all JavaScript code from your script tags.

    o   Use a prompt box to capture some user input to a variable called check_string.

    o   Use a document.write statement to output the results of each of the various string methods when applied to the user input.

         o   Check the user input to see if it’s an email address, and alter your output accordingly to either “That’s an email address” or “That doesn’t look like an email address to me!”

    o   In the latter case, output the failed string as well so that the user can see their input and modify it next time, if appropriate.