Title JavaScript: Regex Tutorial

Hello this is a tutorial reviewing regex, which is short for regular expression. Regex is a sequence of characters that defines a specific search pattern. When included in code or search algorithms, regular expressions can be used to find certain patterns of characters within a string, or to find and replace a character or sequence of characters within a string. They are also frequently used to validate input.

Summary

Matching an HTML Tag: /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/

One of the more useful regexes on the list. It matches any HTML tag with the content inside. As usually, we begin with the start of the line.

First comes the tag’s name. It must be one or more letters long. This is the first capture group, it comes in handy when we have to grab the closing tag. The next thing are the tag’s attributes. This is any character but a greater than sign (>). Since this is optional, but I want to match more than one character, the star is used. The plus sign makes up the attribute and value, and the star says as many attributes as you want.

Next comes the third non-capture group. Inside, it will contain either a greater than sign, some content, and a closing tag; or some spaces, a forward slash, and a greater than sign. The first option looks for a greater than sign followed by any number of characters, and the closing tag. \1 is used which represents the content that was captured in the first capturing group. In this case it was the tag’s name. Now, if that couldn’t be matched we want to look for a self closing tag (like an img, br, or hr tag). This needs to have one or more spaces followed by “/>”.

The regex is ended with the end of the line.

String that matches:

Nettuts”>http://net.tutsplus.com/”>Nettuts+

String that doesn’t match:

<img src=”img.jpg” alt=”My image>” /> (attributes can’t contain greater than signs)

References: http://geekswithblogs.net/brcraju/archive/2003/10/23/235.aspx http://code.tutsplus.com/tutorials/8-regular-expressions-you-should-know–net-6149 http://gnosis.cx/publish/programming/regular_expressions.html

Collected By: Md. Shakil Mahmud

Retrieved from https://quitideas.wordpress.com/2016/08/09/learn-how-to-write-regular-expression/

Anchors
Quantifiers
Grouping Constructs
Bracket Expressions
Character Classes
The OR Operator
Flags
Character Escapes

Regex Components

Anchors

Anchors have special meaning in regular expressions. They do not match any character. Instead, they match a position before or after characters:

^ – The caret anchor matches the beginning of the text. $ – The dollar anchor matches the end of the text. See the following example:

let str = 'JavaScript';
console.log(/^J/.test(str));

Output:

true

The /^J/ match any text that starts with the letter J. It returns true.

Retrieved from https://www.javascripttutorial.net/regular-expression-anchors/

Quantifiers

Indicate numbers of characters or expressions to match.

const ghostSpeak = 'booh boooooooh';
const regexpSpooky = /bo{3,}h/;
console.log(ghostSpeak.match(regexpSpooky));
// expected output: Array ["boooooooh"]

const modifiedQuote = '[He] ha[s] to go read this novel [Alice in Wonderland].';
const regexpModifications = /\[.*?\]/g;
console.log(modifiedQuote.match(regexpModifications));
// expected output: Array ["[He]", "[s]", "[Alice in Wonderland]"]

const regexpTooGreedy = /\[.*\]/g;
console.log(modifiedQuote.match(regexpTooGreedy));
// expected output: Array ["[He] ha[s] to go read this novel [Alice in Wonderland]"]

Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers

Grouping Constructs

Groups and ranges indicate groups and ranges of expression characters. x|y Matches either "x" or "y". For example, /green|red/ matches "green" in "green apple" and "red" in "red apple

Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges

Bracket Expressions

Brackets indicate a set of characters to match. Any individual character between the brackets will match, and you can also use a hyphen to define a set.

'elephant'.match(/[abcd]/) // -> matches 'a'

You can use the ^ metacharacter to negate what is between the brackets.

'donkey'.match(/[^abcd]/) // -> matches 'o'

You will often see ranges of the alphabet or all numerals. [A-Za-z] [0-9] Remember that these character sets are case sensitive, unless you set the i flag. Retrieved from https://javascript.plainenglish.io/regular-expressions-brackets-f2d6f69ffe13

Character Classes

A character class allows you to match any symbol from a certain character set. A character class is also called a character set. Suppose that you have a phone number like this:

+1-(408)-555-0105

And you want to turn it into a plain number:

14085550105

Character classes in regular expressions can help you to achieve this.

Retrieved from https://www.javascripttutorial.net/javascript-character-classes/

The OR Operator

Alternation is the term in regular expression that is actually a simple “OR”. In a regular expression it is denoted with a vertical line character |. For instance, we need to find programming languages: HTML, PHP, Java or JavaScript. The corresponding regexp: html|php|java(script)?. A usage example:

let regexp = /html|php|css|java(script)?/gi;
let str = "First HTML appeared, then CSS, then JavaScript";
alert( str.match(regexp) ); // 'HTML', 'CSS', 'JavaScript'

Retrieved from https://javascript.info/regexp-alternation

Flags

Regular expressions have six optional flags that allow for functionality like global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.

To include a flag with the regular expression, use this syntax:

var re = /pattern/flags;

Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Character Escapes

If you need to use any of the special characters literally (actually searching for a "", for instance), you must escape it by putting a backslash in front of it. For instance, to search for "a" followed by "" followed by "b", you'd use /a*b/ — the backslash "escapes" the "*", making it literal instead of special.

Similarly, if you're writing a regular expression literal and need to match a slash ("/"), you need to escape that (otherwise, it terminates the pattern). For instance, to search for the string "/example/" followed by one or more alphabetic characters, you'd use //example/[a-z]+/i—the backslashes before each slash make them literal.

To match a literal backslash, you need to escape the backslash. For instance, to match the string "C:" where "C" can be any letter, you'd use /[A-Z]:\/ — the first backslash escapes the one after it, so the expression searches for a single literal backslash.

If using the RegExp constructor with a string literal, remember that the backslash is an escape in string literals, so to use it in the regular expression, you need to escape it at the string literal level. /a*b/ and new RegExp("a\b") create the same expression, which searches for "a" followed by a literal "" followed by "b".

If escape strings are not already part of your pattern you can add them using String.replace:

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}