JavaScript Characters – Learn to play with Characters in JS

Previously, we learned about JavaScript Data Structures, now, this DataFlair’s tutorial will follow JavaScript characters and all the special characters available for the programmer. These characters may be letters, numbers, symbols, etc. We will study all the categories of characters associated with JavaScript and what their uses are. We will learn different techniques to access and use these characters as per our requirement. The numerous special characters used in regular expressions are as follows:

What are JavaScript Characters?

1. Assertions

These include look-ahead, look-behind, and conditional expressions and indicate that a match is possible in some way. The assertions available in JavaScript are as follows:

Code:

'This is a string.'.match(/This(?= is)/g)
// ["This"]
'This is a string.'.match(/This(?! is)/g)
// null
'This is a string.'.match(/(?<=is)This/)
// null
'This is a string.'.match(/(?<! is)This/)
// ["This", index: 0, input: "This is a string.", groups: undefined]

Output:

2. Boundaries

They include the beginnings and endings of lines and words. The following are the different boundaries in JavaScript:

Code:

'DataFlair'.match(/^D/)
// ["D", index: 0, input: "DataFlair", groups: undefined]
'DataFlair'.match(/^d/)
// null
'DataFlair'.match(/r$/)
// ["r", index: 8, input: "DataFlair", groups: undefined]
"This is a DataFlair's JavaScript tutorial".match(/\bData/)
// ["Data", index: 10, input: "This is a DataFlair's JavaScript tutorial", groups: undefined]
"This is a DataFlair's JavaScript tutorial".match(/\B/)
// ["", index: 1, input: "This is a DataFlair's JavaScript tutorial", groups: undefined]

Output:

3. Character Classes

These detect different kinds of characters like differentiating between letters and digits. Be sure you’ve gone through our article on JavaScript Strings so that you understand the meaning of every shorthand for escape characters. The most common characters in this category are as follows:

4. Sets and Ranges

This category indicates sets (groups) and ranges of expression characters. We search for several characters or character classes inside square brackets […] to search for a given character or a series of characters. The list explaining them is as follows:

The brackets we used above have additional functionality: no escaping. Generally, when we want to find the dot literal in our string, we use the escape character \. In square brackets, we can use many characters like dot, plus, parentheses, etc. without escaping.

We will use the above two categories of characters in the next tutorial, so all you need to do for now is understand how these characters work in JavaScript.

Do you know about JavaScript Array?

5. Quantifiers

It indicates the number of characters or expressions to match. The quantifiers provided by JavaScript are listed in the table below:

var str = “DataFlair: Regular Expressions”

Code:

str.match(/a*/g)
(31) ["", "a", "", "a", "", "", "a", "", "", "", "", "", "", "", "", "", "a", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
str.match(/a+/g)
(4) ["a", "a", "a", "a"]
str.match(/at?/g)
(4) ["at", "a", "a", "a"]
str.match(/s{1}/g)
(3) ["s", "s", "s"]
str.match(/s{1,}/g)
(2) ["ss", "s"]
str.match(/s{1,2}/g)
(2) ["ss", "s"]

Output:

6. Unicode property escapes

Surrogate Strings

All frequently used characters in JavaScript strings have 2-byte representation. But they only allow 65536 combinations; these are not enough to denote every possible symbol. Thus, rare symbols are encoded with a pair of 2-byte characters for additional combinations. These pairs (4-bytes) are popular by the term “surrogate pairs”. These did not exist at the time of JavaScript creation, thus aren’t always processed correctly by the language.

Some of the Unicode values to compare surrogate strings with normal characters are as follows:

7. Flags

There are six flags in JavaScript that affect the search using regular expressions. These are clear in the table below:

8. Multiline Mode

The “m” flag enables the multiline mode in JavaScript, which affects the behavior of ^ and $ characters. In this mode, the script not only searches for a match at the beginning or end of the string but also at the start or end of the string.

Line start ^: The expression /^\d+/ finds all the digits at the start of each line. See the difference in outputs when multiline mode is set and unset.

Line end $: The expression /^\d+/ finds all the digits at the start of each line. The difference in outputs, when multiline mode is set and unset, is clear in the code below.

Code:

var str = `1. JavaScript
2. Big Data
3. Python`
str.match(/^\d+/gm)
// (3) ["1", "2", "3"]
str.match(/^\d+/g)
// ["1"]
str.match(/\w+$/gim)
// (3) ["JavaScript", "Data", "Python"]
str.match(/\w+$/gi)
// ["Python"]

Output:

9. The dot character

A dot character in JavaScript is a special character class that matches any character, except a newline. This means that the statement “DataFlair”.match(/./); results in DataFlair. What happens when we try to match the string: “DataFlair\n JavaScript”.match(/.+/)? We only get the first word as a match. If we want our program to read the newline too, all we need to do is set the dotall flag “s”. Try the code in the console and see what you get.

"DataFlair\n JavaScript".match(/.+/)
// ["DataFlair", index: 0, input: "DataFlair↵ JavaScript", groups: undefined]
"DataFlair\n JavaScript".match(/.+/s)
// ["DataFlair↵ JavaScript", index: 0, input: "DataFlair↵ JavaScript", groups: undefined]

Output:

Summary

In this JavaScript tutorial, we went through the different characters available to a user or a programmer. These characters are widely used in JavaScript Regular Expressions, explained in the next tutorial. We also learned how we can manipulate the output with the combination of these characters.