String and Regular Expression Objects

String Objects

• String objects are among the most commonly encountered objects in JavaScript.
• Whenever a value is quoted (either single quotes, double quotes, or backticks) it becomes a string object and gains access to the methods and properties of that object type.
• Form data is always treated as a string object (even number inputs).
• JavaScript string methods return a copy that is a modified version of the string.
• DOM methods impact the original string (text node).
• The only property for String objects is length; it reflects the number of characters in the string.

Changing String Content

let url = "what we do";
url = url.replace(/\s/g,"_");

let url = "what we do";
url = url.replaceAll(" ","_");

let x = 'Hello World';
x = x.toLowerCase();

let x = 'Hello World';
x = x.toUpperCase();

Splitting and Merging Strings / Text Nodes

const x = "JavaScript";
const y = "great language!";
const z = x.concat(' is a ', y);

const num = "734-111-2222";
const numArray = num.split("-");

textNode.splitText(4);
const newNode = textNode.nextSibling;

parentElementNode.normalize();

Extracting Part of a String

const stringEx = 'JavaScript';
const substrgEx = stringEx.substr(0,4);

const phoneEx = "734-111-2222";
const sansAreaCode = phoneEx.substr(4);

const strg = 'JavaScript';
const justScript = strg.substring(4,10);

const phone = "734-111-2222";
const noAreaCode = phone.substring(4);

Locating Character(s), a Position in a String, or Substring Existence

const name = 'Jason';
const third = name.charAt(2);

const str = 'Web Design and Development';
const e1 = str.endsWith('Development');
const e2 = str.endsWith('Design', 10);

const str = 'Web Design';
const exists1 = str.includes('Design');
const exists2 = str.includes('design');

const phone = "734-111-2222";
const start = phone.indexOf("-") + 1;
const localPh = phone.substring(start);

const phone = "734-111-2222";
const pos = phone.lastIndexOf("-") + 1;
const last4 = phone.substring(pos);

const theTopic = "Web Development";
const lookWeb = theTopic.match(/Web/);

const theTopic = "Web Development";
const dev = theTopic.search(/Dev/);

const str = 'Web Design';
const s1 = str.startsWith('Web');
const s2 = str.startsWith('Design', 4);

Chaining Together String Methods

• We can also use multiple String methods in sequence and applied to the same string using dot notation, saving us time and streamlining code:

  const s = 'JavaScript'.toUpperCase().substring(4);

  The value of s is: SCRIPT

Additional Examples and String Methods

• For additional examples and details on even more methods, MDN is always a good resource.

Regular Expression Objects

• In JavaScript there is a RegExp core object that can be combined with the String core object for pattern matching and search-replace functionality.
• Regular expressions describe a pattern of characters.
• The regular expression literal (which automatically creates a Regular Expression object) uses this pattern: / /
• Entire books have been written about regular expressions and they can become quite complex (and more powerful / precise as complexity increases). Our focus is on simpler implementations that suffice for form validation and string modification purposes.

Matching Patterns at the Level of Words and Sequences of Characters

• If we wanted to determine whether the word 'Internet' was used as part of a string, the regular expression would be:

  /Internet/
  

• In this context we are dealing with literals, meaning that we are exactly matching that spelling and capitalization.
• Note that if you were searching for a literal / in the string, you would need to escape that with the \ character, coded as: \/
• This approach of escaping characters is one way to test for the presence of additional literals that would otherwise have a special meaning or interpretation in the regular expression.
• Other literals include:

  \n   // Matches new line
  \f   // Matches form feed
  \r   // Matches carriage return
  \t   // Matches tab
  \v   // Matches vertical tab
  

Matching Patterns at the Level of Individual Characters

• If we surround the regular expression value with square brackets [ ] we are able to match any one character within the brackets. If we had:

  /[Internet]/
  

  We would match any one of the letters: 'I', 'n', 't', 'e', or 'r'.

• If we wanted to match any characters but those (anything but what is contained in the square brackets), we use a caret ^ to start off the bracket content:

  /[^Internet]/
  

• To match a range of characters we use a hyphen. If we wanted to match any alphanumeric characters we would specify:

  /[a-zA-Z0-9]/
  

• Some of these patterns are extremely common and so some special characters are used to simplify coding:

  \w = Any word character. Same as [a-zA-Z0-9_]

  \W = Any non-word character. Same as [^a-zA-Z0-9_]

  \s = Any whitespace character. Includes tabs, vertical tabs, newlines, carriage returns, and form feeds. Equivalent to [\t\r\n\v\f]

  \S = Any non-whitespace character. Not the same as \W, because \S excludes tabs, vertical tabs, newlines, carriage returns, and form feeds. Equivalent to [^\t\r\n\v\f]

  \d = Any digit. Same as [0-9].

  \D = Any non-digit character. Same as [^0-9].

  . = Any character except newline.

Matching Patterns Involving a Certain Number of Characters

• Lets assume that we wanted to look for a 5-digit pattern. We could specify that as:

  /\d{5}/
  

  This is equivalent to:

  /\d\d\d\d\d/
  

• With this example we see that curly braces {} containing a single value match an exact number of occurrences.
• If we want to match a range of occurrences we can provide a second value. In this case the first number is the minimum number of occurrences and the second number is the maximum.

  /\d{5,10}/
  

  Now we would be matching at least 5 digits and no more than 10 digits. If we wanted to open up the maximum so that there was no cap, we would have a comma followed by no value (so there would need to be 5 digits, although there could be more):

  /\d{5,}/
  

• If we want to match zero or one occurrences of an item we follow it with a question mark ?
• Zero or more (could be greater than one) occurrences of the previous item is signified by a *
• The + character matches one or more occurrences
• Some examples:

  // 5 digits and optional single digit
  /\d{5}\d?/
  
  // 5 digits and zero or more digits
  /\d{5}\d*/
  
  // 5 digits and one or more digits
  /\d{5}\d+/
  

• If we wanted to provide alternatives during matching, we would use the | (pipe) character, such as:

  // 2 digits or 4 non-digit characters
  /\d{2}|\D{4}/
  

Grouping Sets of Characters

• To group a set of characters (referred to as a subexpression or register) the parentheses () are used.
• This can be useful when applying ?, *, +, or | to the group:

  // 2 digits or 4 non-digit characters,
  // plus one or more word character(s)
  /(\d{2}|\D{4})\w+/
  

• Another advantage of grouping is that these subexpressions can be referenced again later using their position, starting from the left and numbered starting with 1, which is incremented as further subexpressions are added.

  The subexpression above would be referenced as \1, and if we added another to the right of the first that would be \2.

  There can be up to nine of these (at \10 we encounter issues, because that is interpreted as \1).

Matching Based on Position in String

• The ^ can also be used inside the regular expression to indicate that the pattern must start at the beginning of the string. A $ indicates that the pattern must exist at the end of the string. If we wanted to isolate the word 'Internet' as the exact value of the string (no other characters allowed), the regular expression would be:

  /^Internet$/
  

• The importance of this in form validation is substantial; we do not want users to be able to sneak extra characters into a string at the start or the end (this would still validate because the middle portion would meet the regular expression criteria). Use of ^ and $ prevent that from happening.

Matching Based on Word Boundaries

• If we wanted to match based on where a word ends and a non-word character begins, we would use \b (word boundary), such as:

  // Matches "The Internet is Great"
  /net\b/
  

• The \B matches a non-word boundary:

  // Matches "Internet" but not 
  // "It was a net gain"
  /\Bnet/  
  

Case Insensitivity, Global Matching, and Multiline Mode Flags

• To do matching without regard to case, add an i outside the final / of the regular expression.
• To do a global match (to match every occurrence of the pattern in the string) add a g outside the final / of the regular expression. This is essential when searching for a pattern and, when you find a match, making changes to the string there; you do not want to miss any of the places where changes should occur. Without g only the first match would be changed.

  // Matches INTERNET, Internet, 
  // INternet, internet, etc.
  /Internet/gi
  

• To switch to multiline mode specify m after the final / of the regular expression. In this mode ^ matches the beginning of a line or the beginning of a string. $ matches the end of a line or the end of a string.

  // Matches 'Internet' and 
  // 'On the Internet\nNo 
  // one knows you're a dog'
  /Internet$/m    
  

Regular Expression Methods

const textEx = /\w+/.test("Internet");
const numberEx = /\d+/.test("Internet");

Form Validation

• Form validation refers to checking form data prior to sending the data to a server-side script for processing and/or saving it to a cookie or localStorage (a database within the browser).
• By catching errors and bad data at this stage, time is saved and server resources are saved.
  • However there is always the risk that the user will have disabled JavaScript, eliminating this data checking.
  • Because of this limitation server-side data checking is a necessity for critical data.
• There are two types of form validation:
  • Data Existence: Has data been entered or a selection made?
  • Data Correctness: Is the data valid and properly formatted?
• The form validation examples are primarily intended to catch accidents in data entry; users really wanting to enter bad data can still find a way to do so, such as making up a properly formed yet non-existent email address.

Data Existence Checking for Input Boxes and Textarea Boxes

• Use the value property of the form element.
• If that value is empty (value === "" or value === '') then the form field contains no data.

Data Existence Checking for Radio Buttons and Checkboxes

• If one of these is clicked by the user then the checked property is true for that element node.
• Typically the approach taken is to:
  1. Set a status variable to either true or false
  2. Loop through the form elements and if any of them are checked then flip that status variable to the opposite value.
  3. After the loop if the status variable is still at its initial value you know that none of the radio buttons or checkboxes were checked.

Data Existence Checking for Select Menus

• If the menu is showing multiple options (it is not a drop-down menu) and if no selections have been made then the selectedIndex is -1.
• If only one selection is possible (the standard drop-down menu is this way) then the options[0] position is automatically selected in some browsers but not necessarily in all browsers, so in that case you would want to check for a selectedIndex of less than or equal to 0. This is most effective if the first option is some default text, such as 'Please choose...', because that is not a valid selection.

Data Existence Checking Example

See the Pen Student Profile by Jason Withrow (@jwithrow) on CodePen.

Data Correctness Checking Example

The structural markup for this example is very similar to the prior example. The two fields for name have been replaced with a single field for name and an email field.

The JavaScript code is also similar, with the changes being regular expressions for the two fields that were changed.

See the Pen Data Correctness Checking by Jason Withrow (@jwithrow) on CodePen.

Regular Expressions for Name and Email Address

• 'Name' is:
  • Expected to be at least two words, separated by a space.
  • Hyphens are allowed in both first and last name.
  • The regular expression also handles additional characters after the last name, such as II (e.g., John Smith II) and Jr. (e.g., John Smith, Jr.), as well as the commas and period.
  • Middle names will also be accepted.
  • The first name must have at least one letter and can include uppercase and lowercase letters, as well as hyphens: [a-zA-Z\-]+
  • This is followed by at least one space: \s+
  • The last name must also contain at least: one letter (uppercase or lowercase), one hypen, one period, one comma, or one space: [a-zA-Z\-\.\,\s]+
• The email address:
  • Starts with at least one alphanumeric character (including underscores), one period, or one hyphen: ([\w\.\-])+
  • The next character is a single @ sign: \@
  • Following the @ sign is at least a single alphanumeric character (including underscores) or a hyphen, as well as at least one period. This is set up so that there can be multiple sub-domains (e.g., space.wccnet.): (([\w\-])+\.)+
  • Then we reach the top-level domain name, which ranges in size from 2-6 characters (there are .museum and .travel top-level domains): ([\w]{2,6})+
  • Note that the characters after @ include digits, in case the person enters an email address where the part after the @ sign is an IP address (this is valid, since all domain names map to IP addresses ultimately).
• In both cases we check the entire string, from the start of the string ^ to the last character in the string $
• It's worth noting that there is a pattern attribute for input elements that accepts regular expressions and will check data against that pattern. The type="email" input already uses a regular expression for checking. And these are widely supported (going back to Internet Explorer 10).
• While this attribute may seem to rule out the need for JavaScript, think how trivial it is to change the form element to be something else (using the developer tools), to use an old non-supportive browser, etc. There are many ways to bypass it. In contrast, bypassing JavaScript often breaks the site (although I don't recommend it for accessibility reasons, sometimes JavaScript is used to add the submit button to the form, so messing with JavaScript could result in a form with no submit button).
• You are also at the mercy of the browser's implementation for pattern and their error messages. You cannot change them. With JavaScript you have all the control you desire over the user experience.