18.3    Strings and Regular Expressions

You’ve already gotten to know the strings in the data types. If you’re a web developer using JavaScript, strings are usually the most common type of data you’ll use. For this reason, I’ll devote a few sections to them here.

The internal structure of strings isn’t unlike that of arrays. The first character of a string also starts with the index 0. The string “Hello world” is internally constructed as shown in Figure 18.2.

The Internal Structure of a String

Figure 18.2     The Internal Structure of a String

18.3.1    Useful Functions for Strings

You’ll often want to check the length of an input string in an input field of a web form. For this purpose, the string data type provides the length property, which contains exactly the number of characters in a string. Here’s an example:

let hello = "Hello world";
console.log(hello.length); // Output: 11

For searching, you can also use the indexOf() and lastIndexOf() methods for the string data type. The first occurrence of a searched character or string will be returned. As with the array, the indexOf() method starts at the beginning of the string, while lastIndex Of() starts at the end of the string. Let’s look at a simple example:

let hello = "Hello world";
console.log(hello.indexOf("lo")); // Output: 3
console.log(hello.indexOf(" ")); // Output: 5
console.log(hello.indexOf("World")); // Output: -1

The substring() and substr() methods are available for extracting strings. Both methods expect the start index from where the string should be extracted as the first argument. If you don’t specify a second argument, the extraction will be performed from the start index to the end. If you do specify a second argument, then for substring(), it should be the index up to which to extract. With substr(), on the other hand, the second argument must be the number of characters to be extracted from the starting index. Here’s another simple example:

let hello = "Hello world";
let pos1 = hello.indexOf(" ");
console.log(hello.substring(pos1 + 1)); // Output: world
console.log(hello.substr(3, 2)); // Output: lo
console.log(hello.substring(0, pos1)); // Output: Hello

Other useful methods are toLowerCase() and toUpperCase() to convert all characters of a string to lowercase and uppercase, respectively.

18.3.2    Applying Regular Expressions to Strings

Regular expressions are used to describe a pattern of strings to formulate a search expression. A regular expression is a formal language that can be used to describe a (sub)set of strings and that can be used, for example, in search and/or replace operations.

Regular expressions are objects of the RegExp type and can be created either as a constructor function with new RegExp() or as a literal notation. Let’s look at a simple example:

let txt = "This text is being searched";
let regEx01 = /Text/; // Literal notation
let regEx02 = new RegExp(/will/); // Constructor function
let n01 = txt.search(regEx01); // Search for "text" in txt
console.log('"text" found at pos. ' + n01);
let n02 = txt.search(regEx02); // Search for "will" in txt
console.log('"will" found at pos. ' + n02);
let newText = txt.replace(regEx01, "paragraph"); // Search and replace
console.log(newText); // Output: The search takes place in this paragraph.

For regular expressions in JavaScript, there are of course many more options available besides the properties and methods shown here.