CSE 3345 1

Regular Expressions

Regex Links

• MDN Regular Expressions

• Regexpal

CSE 3345 3

Regular Expressions

• Patterns used to match character combinations in strings.

• In JS, regular expressions can be used with the RegExp object and with the String object.

CSE 3345 4

Regex Use Cases

• Find and extract data from a document.

• Validate content supplied in a form before it is submitted.– Telephone numbers– SSN– Email addresses– Anything that follows a pattern

CSE 3345 5

Regex Syntax

• Regular expressions are an extremely powerful tool implemented in most languages; however…

• Regular expressions have their own syntax and usage of special characters.

• Difficult to remember if you use them infrequently.

CSE 3345 6

Regex Special Characters: ^

Regex: ^AMatches: “Aaaann Animal Named Alex”Doesn’t match: “an A”

Character Meaning

^ Matches the beginning of input

CSE 3345 7

Regex Special Characters: $

Regex: t$Matches: “Today I ate a tart”Doesn’t match: “tart is here”

Character Meaning

$ Matches the end of input

CSE 3345 8

Regex Special Characters: *

Regex: a*Matches: “aaaaaaaaaaaaaallred”Matches: “tart”Doesn’t match: “tom”

//Star and Question Mark Characters are useful for the patterns with some variation.

Regex: a*mMatches: “tom”*Novice users often overuse/misuse this character.*

Character Meaning

* Matches the preceding character 0 or more times.

CSE 3345 9

Regex Special Characters: +

Regex: 1+Matches: “911”Matches: “912”Doesn’t match: “8675309”

Character Meaning

+ Matches the preceding character 1 or more times.

CSE 3345 10

Regex Special Characters: ?

Regex: l?Matches: “lily”Matches: “llog”Doesn’t match: “Ron”

Character Meaning

? Matches the preceding character 0 or 1 more times.

CSE 3345 11

Regex Special Characters: .

Regex: .nMatches: “nay, an apple is on the tree”Doesn’t match: “nay, an apple is on the tree”

Character Meaning

. (The decimal point) matches any single character except the newline character.

CSE 3345 12

Regex Special Characters: |

Regex: red|blueMatches: “hand me that blue crayon”Matches: “hand me that red crayon”Doesn’t match: “hand me that black crayon”

Character Meaning

| Matches one pattern or the other

CSE 3345 13

Regex Syntax: {n}

Regex: a{2}Matches: “Caandy”Matches: “Caaandy”Doesn’t match: “Candy”

Syntax Meaning

{n} Where n is a positive number. Matches exactly n occurrences.

CSE 3345 14

Regex Syntax: {n,m}

Regex: a{1,3}Matches: “Candy”Matches: “Caaandy”Matches: “Caaaandy”Doesn’t match: “Cndy”

Syntax Meaning

{n,m} Where n and m are positive integers. Matches at least n and at most m occurrences of the preceding character. When either n or m is zero, it can be omitted.

CSE 3345 15

Regex Syntax: [xyz]

Regex: [a-d]Matches: “candy”Matches: “brisket”

Syntax Meaning

[xyz] Character set. Matches any one of the enclosed characters.

CSE 3345 16

Regex Syntax: [xyz]

Regex: [0-5]Matches: “0123456789”Matches: “543210”

Syntax Meaning

[xyz] Character set. Matches any one of the enclosed characters.

CSE 3345 17

Regex and JavascriptMethod Description

test A RegExp method that tests for a match in a string. It returns true or false.

match A String method that executes a search for a match in a string. It returns an array of information or null on a mismatch.

search A String method that tests for a match in a string. It returns the index of the match, or -1 if the search fails.

replace A String method that executes a search for a match in a string, and replaces the matched substring with a replacement substring.

split A String method that uses a regular expression or a fixed string to break a string into an array of substrings.

CSE 3345 18

Sample Regex

• To use a regex in javascript, surround the regex with forward slashes

• For example, I have the regex [a-z]. To use it in javascript I would do the following.

var regex = /[a-z]/; //matches any lower case character that is in the alphabet a-z.

var string = "tom";

string.match(regex); // ["t"]

CSE 3345 19

Advanced Regex FlagsRegular expression have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regex.

CSE 3345 20

Advanced Regex Flags Example

"tom".match(/T/); // null

//Using the i flag you can perform case insensitive searches.

"tom".match(/T/i); // ["t"/

CSE 3345 21

Regex Challenge

• Write a regular expression that will only accept a string that contains

• lower and upper case alphabet characters• Underscore characters• Must have an inclusive length between 8 and

32.

CSE 3345 22

XMLHttpRequest Reference Links

• MDN

• Jibbering.com

• OpenJS XMLHttpRequest Example

CSE 3345 23

AJAX Quickfacts

• Using the XMLHttpRequest API is what is known as AJAX.

• Asynchronous Javascript and XML.

• Used to send data back and forth from client to server without leaving a webpage.

CSE 3345 24

AJAX Quick facts

• AJAX is the combination of HTML, CSS, and Javascript.

• Makes sending HTTP request fast and easy.

• Wasn’t very popular until Microsoft’s Outlook Web Access (2000) and Google’s Google Maps(2005) and Gmail(2004).

CSE 3345 25

How AJAX Works

CSE 3345 26

Creating an XMLHttpRequest()

• Older browsers, IE5 and IE6, use a different method.

• Newer browsers do the following:

var request = new XMLHttpRequest();

CSE 3345 27

Initialize a request

• Use the open() method to initialize a request.

//open() interface

void open(DOMString method, DOMString url, optional boolean async, optional DOMString user, optional DOMString password);

CSE 3345 28

open() : Required Parameters

1. method - The HTTP method to use, such as "GET", "POST", "PUT", "DELETE", etc.

2. url - The URL to which to send the request.

CSE 3345 29

open() : Optional Parameters

3. async - An optional boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send()method does not return until the response is received.

4. user - The optional user name to use for authentication purposes; by default, this is an empty string.

5. password - The optional password to use for authentication purposes; by default, this is an empty string.

CSE 3345 30

open() examplevar request = new XMLHttpRequest();request.open("GET", "www.google.com", false);

CSE 3345 31

Send the requestvar request = new XMLHttpRequest();request.open("GET", "www.google.com", false);request.send();

CSE 3345 32

Handling a response message

• When the server receives the client request, it will perform any necessary actions and return back to the client a response message.

• In most cases, the only handling required is to check the response status code, and if everything is okay access the responseText.

CSE 3345 33

Handling a response messagevar request = new XMLHttpRequest();request.open("GET", "www.google.com", false);request.send();

if (request.status === 200) { //200 is an HTTP status code. console.log(request.responseText); //print resp txt to console}

CSE 3345 34

Response Messages attributes/methods

1. status – returns HTTP Status code

2. statusText – returns HTTP status text

3. getResponseHeader() – get specified header from response message.

4. getAllResponseHeaders() – get all headers from response message.

CSE 3345 35

Handling a response message

5. responseType – returns the format the response is in: "arraybuffer", "blob", "document", "json", and "text“.

6. response – returns of the response entity body.

7. responseText – returns the text of the response entity body.

8. responseXML – returns a DOM object of an xml document.

CSE 3345 36

Your Turn

• Using this fiddle as basis, make an XMLHttpRequest to http://lyle.smu.edu/~craley/3345/http/showResponse.php.

CSE 3345 37

Using Query Parameters

• If you recall, GET and POST requests can send a key-value name pair along with an HTTP request.

• This is useful for adding query parameters to your request.

CSE 3345 38

Query Parameters Example

A typical example would look like this:

name=Tim&lastname=Drake&age=17&alias=Robin

CSE 3345 39

GET Request

• When sending a GET request, you combine the url with query parameters separated by a question mark.

http://www.google.com?name=Tim&lastname=Drake&age=17&alias=Robin

CSE 3345 40

GET Request with Query Parms in JS

var url = 'http://www.google.com';var parms = 'name=Tim&lastname=Drake&age=17&alias=Robin';request.open('GET', url+"?"+parms, false);request.send();

CSE 3345 41

POST Request

• When sending a POST request, the HTTP Message includes the query parameters as apart of the message body.

• Additional information about the query parameters are sent as header info:– Content type– Content length– Etc

CSE 3345 42

POST Request with Query Parms in JS

var url = 'http://www.google.com';var parms = 'name=Tim&lastname=Drake&age=17&alias=Robin';request.open('POST', url, false);

//Send the proper header information along with the request.

//Depending on the data type (xml, json, etc) you would modify the content type header.request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");request.send(parms);

See jsFiddle

CSE 3345 43

Full XMLHttpRequest Example

• http://lyle.smu.edu/~craley/3345/http/httpRequest.html

CSE 3345 44

Synchronous Requests

• So far we’ve only seen synchronous requests.

• These requests pause code execution and wait until a response is given from the server before continuing.

• Depending on the request you could be paused for a long time.

• Not ideal for practical purposes.

CSE 3345 45

Asynchronous Requests

• These requests provide a callback function that is triggered when the server responds.

• Code execution isn’t paused.

• This is what you should be using in your code.

CSE 3345 46

Async XMLHttpRequest Examplevar url = "http://www.google.com";var request = new XMLHttpRequest();

request.onreadystatechange = function() {//readyState === 0 : UNSENT. Means open() hasn't been called//readyState === 1 : OPENED. Means send() hasn't been called//readyState === 2 : HEADERS_RECEIVED. Means send() has been called //and headers have been received//readyState === 3 : LOADING. Means downloading //readyState === 4 : DONE. The operation is complete

if (request.readyState === 4) { document.body.innerHTML = request.responseText; }}request.open('GET', url, true); request.send();

See jsFiddle

CSE 3345 47

XMLHttpRequest Bummer

• Unless you have been given permission, you cannot successfully make an HTTP Request to another server.– Cross Domain Request

• Work arounds for this are– Use a different scripting language (PHP, Python)– Use JSONP– If you have access to the different sever, you can get

Cross Domain Request permission.

CSE 3345 48

JSON Reference Links

• JSONLint – a JSON validator

• MDN

• JSON.org

CSE 3345 49

JSON Quick facts

• JSON – javascript object notation

• JSON is a collection of name value pairs

• Is a data-exchange format.

• Closely resembles Javascript syntax.

• Can parse JSON into a JS object.

CSE 3345 50

Hello World JSON Example

{ “fname" : “bruce" }

1. All JSON data starts and ends with a curly brace or square brace2. The curly brace is what encapsulates the data into an Object.3. After all, JSON stands for Javascript Object Notation.

Object

CSE 3345 51

Hello World JSON Example

{ “fname" : “bruce" }

name value

pair

CSE 3345 52

Hello World JSON Example

{ “fname" : “bruce" }

name value

pair

The name portion of the pair must ALWAYS be a String.

CSE 3345 53

Hello World JSON Example

{ “fname" : “bruce" }

valuename

pair

The value portion of the pair can be several different types.

CSE 3345 54

Value types

1. numbers2. booleans3. Strings4. null5. arrays (ordered sequences of values)

6. objects (string-value mappings) composed of these values (or of other arrays and objects).

CSE 3345 55

JSON Example

{ "age": 21, "name": "Sandra Dee", "alive": false}

• It is necessary to separate each pair with a comma. Your JSON will be invalid if you don’t.

CSE 3345 56

JSON Array Example{ "scores": [ 100, 89, 99, 75]}

• An array is an ordered collection of values.

• An array begins with a [ (left bracket) and ends with ] (right bracket).

• Values are separated by a , (comma).

CSE 3345 57

Object in JSON

• Just like typical Object-Oriented Programming, you can have objects inside of objects

{ “pizza” : {

“name” : “The Heart Attack”, “id” : 20121,“toppings” : [ “Pepperoni”, “Cheese”, “Chili” ],“price” : 19.99

}}

CSE 3345 58

JSON Example

{ "type": "document", "students": [ "tom", "sally", "joe" ], "class room": 112, "teach": "Hank McCoy“, “fulltime” : false}

CSE 3345 59

Dissect the JSON Data{ "type": "document", "students": [ { "name": "tom", "age": 18 }, { "name": "sally", "age": 18 }, { "name": "joe", "age": 17 } ], "class room": 112, "teacher": "Hank McCoy", "fulltime": false}

CSE 3345 60

Create a JSON Objectvar class = { "type": "document", "students": [ "tom", "sally", "joe" ], "class room": 112, "teach": "Hank McCoy"};

CSE 3345 61

Navigating a JSON Objectvar json = { "type": "document", "students": [ { "name": "tom", "age": 18 }, { "name": "sally", "age": 18 }, { "name": "joe", "age": 17 } ], "class room": 112, "teacher": "Hank McCoy", "fulltime": false}

JSON Objects are just Javascript Objects,therefore, its easy to access pairs inside the object.

To access a pair, use the pair’s name as an attribute of the object to access the value.

CSE 3345 62

Navigating a JSON Objectvar json = { "type": "document", "students": [ { "name": "tom", "age": 18 }, { "name": "sally", "age": 18 }, { "name": "joe", "age": 17 } ], "class room": 112, "teacher": "Hank McCoy", "fulltime": false}

json.type; // “document”json.students[0].name; // “tom”json.students[0].age; // 18json.students[1].name; // “sally”json.students.length; // 3json[“class room”]; // 112json.teacher; // “Hank McCoy”json.fulltime; // false

CSE 3345 63

JSON Methods

• JSON.stringify() to convert object to JSON string

• JSON.parse() to convert JSON string to JS Object.

CSE 3345 64

JS Object JSON JS Object//Create a javascript Objectvar foo = {};foo.bar = "something";foo.baz = 7;

//Converts JS Object into a JSON stringvar json = JSON.stringify(foo); //"{"bar":"something","baz": 7}“

//Converts JSON string back into JS Objectjson = JSON.parse(json);console.log(json.bar); // “something”console.log(json.baz); // 7

CSE 3345 65

Your turn

• Use AJAX to fetch the following JSON: http://lyle.smu.edu/~craley/3345/http/drink_genie/supplies.json

• Print out to the console the JSON data for all pairs whose name equals quantity.