Notes for Class No. 24

Introduction to Regular Expressions (continued)

Tuesday, November 24, 2015

A video of this class is (or will be) posted at: http://echo360.uml.edu/heines201516/guiprogramming1.html

Handouts and Materials

Using Regular Expressions with JavaScript (PDF)
- original source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Regular Expression Cheat Sheet (PDF)
- original source: http://www.cheatography.com/davechild/cheat-sheets/regular-expressions
Assignment No. 9: Implementing a Bit of Scrabble with Drag-and-Drop

Openings / Announcements / Reminders

Yet another wonderful post I was referred to by a friend as a follow-up to the terrorism in France

http://www.bbc.com/news/world-europe-34862437

Wonderful site for test regular expressions

https://regex101.com/

Interesting Firefox vs. Chrome differences in support for CSS clipping and masking

https://css-tricks.com/clipping-masking-css/

The name of the web development platform that I couldn’t think of last week is Drupal

https://www.drupal.com/

Currently planning a final short quiz on Tuesday, December 1st

Class Notes

Working with Associative Arrays in JavaScript

See the challenge posted in my response to Ramon Meza’s posting on Piazza

Pattern Matching (continued)

Review from last class ...

Regular expressions are made up of several parts

characters
character classes
alternative match patterns
quantifiers
assertions
back references

Normal characters

except for the metacharacters, most single characters in a regular expression match themselves

Character classes

in addition to matching single characters, RegExs allow specification of a set of characters to match
- such a set is called a character class
- character classes are enclosed in square brackets [...], as in [aeiou]
- one can also use a character class to specify a range of characters by using a hyphen (-), as in [a-z] or [0-9]
- character classes may contain multiple ranges, as in [a-zA-Z0-9]
the match engine returns true if it finds any one of the characters in a character class in the search string
as an example, consider the rules for valid MasterCard numbers
- the card number must start with the digit 5
- the second digit must be 1, 2, 3, 4, or 5
- the card number must contain a total of 16 digits
5[1-5]\d\d\d\d\d\d\d\d\d\d\d\d\d\d 5[1-5]\d{14}(see below)

Pattern Metacharacters

RegEx patterns are built using metacharacters that have special meanings within the context of an RegEx
- these metacharacters can be “escaped” and used as normal characters by preceding them with a backslash (\)

Metacharacter Interpretation Example

. Matches any single character except newline ".ba" matches barbara and yabba

[cccccc] Matches any single character listed in this set "[Vv]ariable[12]" matches variable1 and Variable2

[^cccccc] Matches any single character not listed in this set "value[^01]" matches valuex and value2 but not value1 or value0

[c-c] Matches any single character within the range in this set "age[5-8]" matches age5, age6, age7 and age8

$ Matches the end of a string (or line if the "m modifier is used) "txt$" matches test.txt but not test.txtfile

^ Matches the beginning of a string (or line if the "m modifier is used) "^ja" matches javascript and java but not Wow, Java’s cool!

* Matches 0 or more of the preceding regular expression "value[0-9]*" matches value1, value10 and value

+ Matches 1 or more of the preceding regular expression "value[0-9]+" matches value1 and value999, but not value

? Matches 0 or 1 of the preceding regular expression (i.e., optional) "html?" matches html and htm

{quantity} Matches exactly quantity of the preceding regular expression "value[0-9]{3}" matches value001, value010 and value123, but not value1

{min,max} Matches at least min but no more than max of the preceding regular expression "value[0-9]{3,5}" matches value001, log0011 and log12345, but not log35

| Matches either the expression on the left or the right of the | "Mr\.|Mrs\.|Ms\." matches Mr. or Mrs. or Ms.

Metacharacter	Interpretation	Example
`.`	Matches any single character except newline	".ba" matches barbara and yabba
`[cccccc]`	Matches any single character listed in this set	"[Vv]ariable[12]" matches variable1 and Variable2
`[^cccccc]`	Matches any single character not listed in this set	"value[^01]" matches valuex and value2 but not value1 or value0
`[c-c]`	Matches any single character within the range in this set	"age[5-8]" matches age5, age6, age7 and age8
`$`	Matches the end of a string (or line if the "m modifier is used)	"txt$" matches test.txt but not test.txtfile
`^`	Matches the beginning of a string (or line if the "m modifier is used)	"^ja" matches javascript and java but not Wow, Java’s cool!
`*`	Matches 0 or more of the preceding regular expression	"value[0-9]*" matches value1, value10 and value
`+`	Matches 1 or more of the preceding regular expression	"value[0-9]+" matches value1 and value999, but not value
`?`	Matches 0 or 1 of the preceding regular expression (i.e., optional)	"html?" matches html and htm
`{quantity}`	Matches exactly quantity of the preceding regular expression	"value[0-9]{3}" matches value001, value010 and value123, but not value1
`{min,max}`	Matches at least min but no more than max of the preceding regular expression	"value[0-9]{3,5}" matches value001, log0011 and log12345, but not log35
`\|`	Matches either the expression on the left or the right of the \|	"Mr\.\|Mrs\.\|Ms\." matches Mr. or Mrs. or Ms.

RegEx patterns may include escape sequences
- standard C escape sequences

Escape
Sequence Interpretation

\' Single quotation mark

\" Double quotation mark

$ The $ sign

\a Alarm (a small bell sound)

\b Backspace

\e Escape

\E End \L, \Q, or \U

\f Form feed

\l Lowercase next character

\L Lowercase all following characters until \E

\n New line

\Q Backslash all following non-alphanumeric characters until \E

\r Carriage return

\t Tab

\u Uppercase next character

\U Uppercase all following characters until \E

\\ Single backslash

RegEx escape sequences

Escape
Sequence Interpretation

\A Match the beginning of a string (same as ^ if /m is not used)

\B Match a non-word boundary

\b Match a word boundary (between \w and \W)

\cx Match control character x (for example, \cC matches Ctrl/C)

\d Match a digit character [0-9]

\D Match a non-digit character [^0-9]

\nnn An octal ASCII value

\s Match a white space character [ \t\n\r\f]

\S Match a non-white space character [^ \t\n\r\f]

\w Match a “word” (alphanumeric) character [a-zA-Z_0-9]

\W Match a non-word character [^a-zA-Z_0-9]

\xnn A hexadecimal ASCII value

\Z Match the end of a string or before a new line (same as $ if /m is not used)

\z Match the end of a string

Escape Sequence	Interpretation
`\'`	Single quotation mark
`\"`	Double quotation mark
`$`	The $ sign
`\a`	Alarm (a small bell sound)
`\b`	Backspace
`\e`	Escape
`\E`	End \L, \Q, or \U
`\f`	Form feed
`\l`	Lowercase next character
`\L`	Lowercase all following characters until \E
`\n`	New line
`\Q`	Backslash all following non-alphanumeric characters until \E
`\r`	Carriage return
`\t`	Tab
`\u`	Uppercase next character
`\U`	Uppercase all following characters until \E
`\\`	Single backslash

Escape Sequence	Interpretation
`\A`	Match the beginning of a string (same as ^ if /m is not used)
`\B`	Match a non-word boundary
`\b`	Match a word boundary (between \w and \W)
`\cx`	Match control character x (for example, \cC matches Ctrl/C)
`\d`	Match a digit character [0-9]
`\D`	Match a non-digit character [^0-9]
`\nnn`	An octal ASCII value
`\s`	Match a white space character [ \t\n\r\f]
`\S`	Match a non-white space character [^ \t\n\r\f]
`\w`	Match a “word” (alphanumeric) character [a-zA-Z_0-9]
`\W`	Match a non-word character [^a-zA-Z_0-9]
`\xnn`	A hexadecimal ASCII value
`\Z`	Match the end of a string or before a new line (same as $ if /m is not used)
`\z`	Match the end of a string

To match any of the following characters, they must be “escaped” by preceding them with a backslash (\)
- \ ^ . $ | ( ) [ ] * + ? { } ,
see AddedBytes.com Regular Expressions “Cheat Sheet” for additional information

New material begins here ...

Using Regular Expressions with JavaScript

Syntax

var re = /ab+c/ ;
Note that there are no quotes!

RegExs can be used with

the exec and test methods of RegExp
the match, replace, search, and split methods of String
the most common use is with String variables

Example use with the jQuery Validator

this example demonstrates how to work around the facts that
- the number rule allows decimals
- the digits rule does not allow negative numbers
Alan Syzmt and I therefore developed an integer rule
- original code by Alan Syzmt, enhanced by Jesse Heines

/** Custom method to check for negative as well as positive integers.
 *  added by JMH on November 16, 2015 at 10:55 AM
 *  modeled after http://stackoverflow.com/questions/14949257/jquery-validate-method-checking-for-special-characters
 */
jQuery.validator.addMethod("integer", function( value, element ) {
    var regex = new RegExp("^-?[0-9]+$");
    return ( regex.test( value ) ) ;
  }, "Please use only digits or the - character." ) ;
    

// you must wait for the page to be loaded before executing these statements
// this is why we put them inside jQuery's document ready function
$(document).ready( function() {
  /* This function makes sure each of the inputs was filled out before accepting the form
     and now uses the JQuery Validation Plugin */
  if ( ! isNaN( mplier1 ) ) {
    $('#message').html( "You entered: " + mplier1 + ", " + mplier2 + ", " + mcand1 + ", " + 
        mcand2 + ". Thank you!<br>" ) ;
  }

  /* Uses JQuery Validation Plugin to validate the form and print error messages */
  $('#multiplicationTable').validate ( {
    rules: {
      multiplierStart: {
        required: true,
        integer: true,
        range: [-500, 500]
      },
      multiplierEnd: {
        required: true,
        integer: true,
        range: [-500, 500]
      },
      multiplicandStart: {
        required: true,
        integer: true,
        range: [-500, 500]
      },
      multiplicandEnd: {
        required: true,
        integer: true,
        range: [-500, 500]
      }
    },
    messages: {
      multiplierStart: {
        required: "Please enter the first Multiplier.",
        integer: "The input has to be a integer.",
        range: "Please enter a number between -500 and 500."
      },
      multiplierEnd: {
        required: "Please enter the second Multiplier.",
        integer: "The input has to be a integer.",
        range: "Please enter a number between -500 and 500."
      },
      multiplicandStart: {
        required: "Please enter the first Multiplicand",
        integer: "The input has to be a integer.",
        range: "Please enter a number between -500 and 500."
          
      },
      multiplicandEnd: {
        required: "Please enter the second Multiplicand.",
        integer: "The input has to be a integer.",
        range: "Please enter a number between -500 and 500."
      }
    },
    success : function( error, element ) {
        $(element).css( { "background-color" : "" } ) ; 
    } ,
    errorPlacement : function( error, element ) {
      $(error).appendTo( $("#message") ) ;
    }
  } ) ;
} ) ;

Run this code

Example for adding commas to large numbers

JavaScript Function

/*  File:  /~heines/jmhutilities.js
 *  Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu
 *  Copyright (c) 2015 by Jesse M. Heines.  All rights reserved.  May be freely 
 *    copied or excerpted for educational purposes with credit to the author.
 *  updated by JMH on December 14, 2007 at 11:29 AM
 *  updated by JMH on November 21, 2015 at 12:01 PM
 */
 

// Month and Day Name Strings

var strMonthName = [ "January", "February", "March", "April", "May", "June", "July", "August",
                     "September", "October", "November", "December" ] ;
var strDayName = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ] ;


// This function rounds a number to the specified number of decimal places.
//
// Parameters:
//    n     the number to round
//    nDec  the desired number of decimal places

function RoundTo( n, nDec ) {
  var Multiplier = Math.pow( 10, nDec ) ;
    // we need 10 raised to the power of the desired number of decimal places

  return Math.round( Multiplier * n ) / Multiplier ;  
    // to get the desired result, we multiply the number by the multiplier, 
    //   round it, and then divide it by the multiplier
}


// This function formats a number by adding a decimal point and trailing zeros 
// if requested and padding the front of the number with spaces to the desired 
// width if necessary.
//
// Parameters:
//    n        the number to be formatted
//    nWidth   the total desired width of the result in number of characters
//                default = no limit
//    nDec     the number of places desired after the decimal point
//                note: if nDec is 0, no decimal point will be added
//                default = 2
//    bCommas  true = add commas for thousands, etc.
//                default = true

function FormatNumber( n, nWidth, nDec, bCommas ) {
  var strNumber ;   // the number to format converted to a string
  var nLen ;        // the number of characters in the formatted number
  var k ;           // local loop index
  
  if ( nWidth === undefined  || nWidth === null )  { nWidth = 0 ; }
  if ( nDec === undefined    || nDec === null  )   { nDec = 2 ; }
  if ( bCommas === undefined || bCommas === null ) { bCommas = true ; }

  var fixedwidth = ( navigator.appName === "Netscape" ) ;
          // set to false if the default form field font is not fixed-width
          //   Netscape default is fixed-width, Internet Explorer is variable

  
  // round the number to the desired number of decimal places
  n = RoundTo( n, nDec ) ;

  // convert the number to format to a string
  // strNumber = n.toString() ;   // note that this is a function, so it has parentheses
                             // this causes an error in Internet Explorer Version 3
  strNumber = "" + n ;            // this forces a type conversion and concatenation

  // add a decimal point and trailing zeroes if appropriate
  if ( nDec > 0 ) {
    if ( strNumber.indexOf( "." ) == -1 ) {  // add decimal point if it does not 
      strNumber = strNumber + "." ;               //   exist
    }
    while ( strNumber.indexOf( "." ) >= strNumber.length-nDec ) {
      strNumber = strNumber + "0" ;               // add trailing zeroes if required
    }
  }

  // add a leading 0 if the first character is a decimal point and the string
  // is shorter than the desired width
  if ( (strNumber.length < nWidth) && (strNumber.charAt(0) == ".") ) {
    strNumber = "0" + strNumber ;
  }
 
  // add commas if appropriate
  var verno = 2 ;   // version number to execute
  if ( bCommas ) {
    switch ( verno ) {
      case 1 :  // version 1, using string functions
        var strParts = strNumber.split( "." ) ;
        var strWithCommas = "" ;
        var intNCommas = Math.floor( (strParts[0].length-1) / 3 ) ;
        var intFirstDigit = 0 ;
        var intLastDigit = strParts[0].length - ( intNCommas * 3 ) ;
        while ( intFirstDigit < (strParts[0].length) )  {
          if ( strWithCommas != "" ) { strWithCommas += "," ; }
          strWithCommas += strParts[0].slice( intFirstDigit, intLastDigit ) ;
          intFirstDigit = intLastDigit ;
          intLastDigit = intFirstDigit + 3 ;
        }
        strNumber = strWithCommas + "." + strParts[1] ;
        break ;

      case 2 :  // version 2, using regular expressions
        var arrNumber = strNumber.split(".") ;  // splits strNumber on the decimal point
        var numericPart = arrNumber[0] ;        
            // the first array element is the numeric part of the number
        var decimalPart = arrNumber.length > 1 ? "." + arrNumber[1] : "" ;
            // the second array element is the decimal part of the number
            // this is the part of the number after the ".", or an empty string ("") if
            //    there is no decimal point
      
        var rgx = /(\d+)(\d{3})/ ;
            // this regular expression matches 1 or more decimal digits followd by a group of 
            //    3 decimal digits
            //  \d    matches any decimal digit
            //  \d+   matches 1 or more decimal digits
            //  \d{3} matches 3 decimal digits, which is the same as \d\d\d
            // the parentheses group the matches so that they can be referred to as $1 and $2 below
            // this regular expression will therefore match whenever there are at least 4 decimal 
            //    digits in a row
      
        // repeat until the regular expression no longer matches
        while ( rgx.test( numericPart ) ) {
          numericPart = numericPart.replace( rgx, "$1" + "," + "$2" ) ;
            // $2 is the group of 3 decimal digits at the right of the matched expression
            // $1 is the group of 1 or more decimal digits to the left of the group of 3
            // this statement therefore concatenates the left group with a comma followed by the 
            //    group of 3
        }
      
        // return the formatted numeric part concatenated to the original fractional part
        //    (which may be blank)
        strNumber = numericPart + decimalPart ;
        break ;
    }
  }
  
  // add leading spaces if appropriate
  nLen = strNumber.length ;   // length of formatted number, note that "length" is 
                              //   a property, therefore it is not followed by ()

  for ( k = nLen ; k < nWidth ; k++ ) {   // for each digit needed to increase
                                          //   the number to the desired width:
    if ( fixedwidth ) {                   // for a fixed-width font, 
      strNumber = " " + strNumber ;       //   add one leading space
    } else {                              // for a variable-width font, 
      strNumber = "  " + strNumber ;      //   add two leading spaces 
    }
  }
  
  // return the formatted number
  return strNumber ;
}

Test Program

<!DOCTYPE HTML>
<html>

<head>
  <title>Formatting Large Numbers Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--
  File:  /~heines/91.461/91.461-2015-16f/461-lecs/code/FormatLargeNumbers.html
  Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu
  Copyright (c) 2015 by Jesse M. Heines.  All rights reserved.  May be freely 
    copied or excerpted for educational purposes with credit to the author.
  updated by JMH on November 21, 2015 at 11:27 AM
-->

  <meta name="description" content="Formatting Large Numbers Demo" />
  <link type="text/css" rel="stylesheet" href="/~heines/blueverdana08pt.css"></link>
  <link type="text/css" rel="stylesheet" 
    href="/~heines/91.461/91.461-2015-16f/461-assn/Scrabble_Pieces_AssociativeArray_Jesse_Test.css">
  </link>
  <style>
    /* overwrite CSS read from the above file */
    td {    /* right-justify numbers in table cells */
      text-align : right ;
    }
    th:nth-child(2) {   /* this table has only two columns, not three */
      border-right : 1px solid black ;
    }
  </style>

  <!-- include jQuery library -->
  <script type="text/javascript" src="/~heines/jQuery/jquery-2.1.4.min.js"></script>
  <!-- include my utilities -->
  <script type="text/javascript" src="/~heines/jmhutilities.js"></script>

  <script>
    $(document).ready( function () {
      var numbers = [ 1, 12, 123, 1234, 12345, 123456, 1234567, 
        1.1, 12.12, 123.123, 1234.1234, 12345.12345, 123456.123456, 1234567.1234567 ] ;
      for ( var k = 0 ; k < numbers.length ; k++ ) {
        // create a new table row
        newTableRow = $("<tr></tr>" ) ;
        
        // create a new table cell to hold the raw number
        newTableCell = $("<td></td>" ) ;
        // put the raw number into the new table cell
        newTableCell.text( numbers[k] ) ;
        // append the new table cell to the new table row
        newTableRow.append( newTableCell ) ;
        
        // create a new table cell to hold the formatted number
        newTableCell = $("<td></td>" ) ;
        // put the formatted number into the new table cell
        newTableCell.text( FormatNumber( numbers[k], null, 3 ) ) ;
        // append the new table cell to the new table row
        newTableRow.append( newTableCell ) ;
        
        // append the complete table row to the table
        $("#tbl").append( newTableRow ) ;
      }
    } ) ;
  </script>
</head>

<body>
  <table id="tbl">
    <tr>
      <th>Raw Number</th>
      <th>Formatted Number</th>
    </tr>
  </table>  
</body>
</html>

Run this code

ES2015 Code School Video

“The Shape of JavaScript to Come”

Using let (6:47)

Using let in for Loops (3:54)

Using const (4:09)

This is document http://jesseheines.com:8080/~heines/91.461/91.461-2015-16f/461-lecs/lecture24.jsp. It was last modified on Friday, August 26, 2022 at 4:09 PM.
Copyright © 2022 by Jesse M. Heines. All rights reserved. May be freely copied or excerpted for educational purposes with credit to the author.

UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines