JavaScript Video Tutorial Pt 6

Regex TutorialIn this part of the JavaScript Video tutorial I will introduce Regular Expressions. A large number of people have trouble with Regular Expressions. I think it is because the name is so confusing? They aren’t!

A Regular Expression is a series of codes used to describe a series of characters in a string.

They are used to search for a specific string of characters in another string.

The way you define a series of characters using a Regular Expression is almost exactly the same no matter what language you are programming in. I created 3 great videos on Regular Expressions using PHP. Remember the Regular Expressions used are the same for JavaScript. Those videos are here:

Ok, with that, let me present my JavaScript Regular Expression Video. All of the code follows the video. Leave questions and comments below.

Code From the Video

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Javascript Regular Expressions</title>

</head>

<body>

<script type=”text/javascript”>

// A regular expression is a series of codes used to describe a series of characters
// Just like you surround strings with quotes, you surround a regex with slashes /
// var regPat = /[1-9]{1,5}\s[A-Z]{2}\b[a-z]{2,}/
// String that starts with 1 to 5 Numbers, a space, 2 Uppercase letters, Word Boundary, 2 or more lowercase
// var regPat = new RegExp(“\d{1,5}\s[A-Z]{2}\b[a-z]{2,}”);

var longStr= “Derek 123 Main St Pittsburgh 15457 (412)-555-5555 dbanas@newthinktank.com”;

document.write(longStr.search(/[A-Za-z]{1,15}\s/) + “<br />”);

// . – Represents any 1 character except a newline
// [^0-9] – Represents anything that isn’t a number
// \w – A-Z, a-z, 0-9, or _
// \W – Opposite of \w
// \S – Opposite of \s
// \D – Opposite of \d
// \B – Anything that’s not a word boundary
// [0-9]? – Represents zero to 1 numbers
// [0-9]+ – Represents 1 or more numbers
// [0-9]* – Represents 0 or more numbers
// [Aa] – Represents 1 A or 1 a
// ^ – Represents the beginning of the string
// $ – Represents the end of the string

document.write(longStr.search(/[A-Za-z0-9._-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}/) + “<br />”);

document.write(longStr.replace(/\d{5}/, “55555”) + “<br />”);
document.write(longStr + “<br />”);

matchArray = longStr.match(/\d{4,5}/g);
document.write(matchArray + “<br />”);

// g – Represents a global or whole string search
// i – Represents a case insensitive search
// m – $ represents the end of the line or string whether it contains \n or not

//
var regexPat = /\d{3,5}/;
document.write((regexPat instanceof RegExp) + “<br />”); // Regex are objects of type RegExp

var regMatch = regexPat.exec(longStr);
document.write(regMatch + “<br />”);
document.write(regMatch.index + “<br />”);

</script>

</body>

</html>

17 Responses to “JavaScript Video Tutorial Pt 6”

  1. ron says:

    execellent tutorial very simple to follow however in your regex expression to match an email address you forgot about email addresses at .co.uk

    I learnt a lot from your simple tutorial that others make very complicated.

    • admin says:

      Sorry about that. The regex can be easily corrected by just allowing for an additional . followed by 2 or 3 characters, but not requiring it. I’m sure you figured that out though if you understood everything else in the video. Thanks for pointing that out

  2. marc_nathan says:

    i followed everything you exactly did in this tutorial but it didn’t work…i’m using an old browser firefox 2 is that the problem? how about the DTD? thanks mr. derek i like your tutorials by the way their great!!!

    • admin says:

      It might be a browser issue. Most of these JavaScript tutorials are based on people using newer browsers. Try running the code in Google Chrome and it will work. Sorry, but I can’t provide tutorials that both show the newest capabilities, while being 100% cross browser compliant. I’m sure you understand that

      • Zeeshan says:

        Hello , i regularly follow your tutorials and never got an error , but this time i could not run the javascript part 6 and part 7 codes, i.e. regExp and form validation, i copied the xact code below the video but it did not worked , I also followed line by line from the video but also m unable 2 get the result … please Help ..! 🙂

        • admin says:

          What error are you receiving and is it occurring in just one browser? I’ll do my best to help. It may be something on the system level

          • Zeeshan says:

            Thank You sir, the problem was with the “double quotes” that you used in these video’s .. but when i changed them to single quotes, it worked, can u tell me the reason behind it ..? ..
            .. sir, i have learnt html, css, javascript, jquery from your series of tutorials, ur a life savior ..! .. m starting to learn php from now on .. but not getting which tutorial to start with ..! .. please guide me ..!
            .. Thank’s ALOT 🙂

            • admin says:

              I’m sorry about the quote issue. That was used in the past as a security measure that I have since eliminated in all but the older tutorials.

              As per PHP, I cover them here PHP Video Tutorial. It is one of my longer tutorials. I hope you find it useful

              • Zeeshan says:

                Wow, jst njoying your PHP tutorial series ..! .. ur THE BEST TEACHER on the planet ..! Thank you v.much and may God bless u wit wat eva u wnt .. 🙂 ..
                ..1 simpl ques I have done HTML, CSS JAVASCRIPT, J-QUERY … N NW M DOIN PHP N MYSQL from ur tutorial series, n as per my knowledge u cover pretty every thing in them. So cn i believe dat i knw all of them to the fullest ..? ..
                and can u please do tutorials on C, C++, ANDROID APPLICATIONS and of the things which are in great demand, n which will be benificial for your INTERNET STUDENTS ..! 🙂

                • admin says:

                  Thank you very much for the kind words. I believe whole heartedly like you that tablet development is the way to go. I’ve already covered a great deal of Java and to make great tablet apps you need C and C++ as well. So, after I finish covering software design I’m going to cover Android development. I may first cover game development with Java. I then will jump head long into making Android apps. Then I’ll cover simple games on Android, OpenGL ES and then more complicated Android games. Thanks for checking out my little site 🙂

  3. maha says:

    love this tutorial.thanks.

  4. Emad says:

    The following line in your code giving me an error:

    document.write(longStr.replace(/\d{5}/, “55555″) + “”);

    Uncaught SyntaxError: Unexpected token >

  5. John Peters says:

    Hey Derek, first of all, AMAZING tutorials. I cannot admire you enough for how knowledgable you are and thank you for sharing with all of us.

    I was wondering, could you give me an example of a regExp that would match american currency values? For example, match all of the

    { “$1000”, “1000$”, “$1,000”, “1,000$”, “$1000.00”, “1000.00$”, “$1,000.00”, “1,000.00$”, “$1.000,00”, “1.000,00$” }

Trackbacks/Pingbacks

  1. Tweets that mention JavaScript Video Tutorial Regular Expressions | New Think Tank -- Topsy.com - [...] This post was mentioned on Twitter by elearningstarr, Daniel Taylor. Daniel Taylor said: JavaScript Video Tutorial Pt 6 http://dlvr.it/HKjLr…

Leave a Reply

Your email address will not be published.

Google+