{"id":1597,"date":"2025-01-29T22:00:00","date_gmt":"2025-01-29T21:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/regex-in-javascript\/"},"modified":"2025-11-28T13:31:45","modified_gmt":"2025-11-28T12:31:45","slug":"regex-in-javascript","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/regex-in-javascript\/","title":{"rendered":"JavaScript RegExp Tutorial"},"content":{"rendered":"

Common Usage<\/h1>\n

Define yourself a regex:<\/p>\n

\/\/ Preferred way\nconst expressionLiteral = \/w+\/;\n\n\/\/ Only use this for dynamic patterns\nconst ctor = new RegExp('\\w+');\n<\/code><\/pre>\n
RegExp.prototype.test<\/h2>\n
RegExp.prototype.test<\/a><\/p>\n
Returns true<\/code> or false<\/code>.<\/p>\n
const didMatch = \/a\/.test('abc');\n<\/code><\/pre>\n
String.prototype.replace<\/h2>\n
String.prototype.replace<\/a><\/p>\n
Without the g<\/code> flag, only the first match is replaced. (which makes no difference in the example:)
 ECMAScript2021 added replaceAll<\/code><\/a>: you can now replace all occurrences without using a regex.<\/p>\n
'too  many  spaces'.replace(\/  \/g, ' ');\n'too  many  spaces'.replaceAll('  ', ' ');\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n\n
Replacement<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
$$<\/code><\/td>\nA literal $<\/td>\n<\/tr>\n
$`<\/code><\/td>\nPortion before the match<\/td>\n<\/tr>\n
$'<\/code><\/td>\nPortion after the match<\/td>\n<\/tr>\n
$&<\/code><\/td>\nThe whole matched string<\/td>\n<\/tr>\n
$n<\/code><\/td>\nWith n < 100<\/code>: the nth captured group (!! 1 indexed !!)<\/td>\n<\/tr>\n
$<Name><\/code><\/td>\nNamed capturing group<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
String.prototype.match<\/h2>\n
match() with the g<\/code> flag<\/strong>:<\/p>\n
String.prototype.match<\/a><\/p>\n
Returns null<\/code> or all matches as a string[]<\/code>. There is no captured group info.<\/p>\n
const match = 'a_ab_a'.match(\/a(b?)\/g);\nexpect(match).toEqual(['a', 'ab', 'a']);\n<\/code><\/pre>\n
match() without the g<\/code> flag<\/strong>:
 Returns null<\/code> or the first match and its capturing groups.
 The result is an array with additional fields (groups, index and input). exec<\/code><\/p>\n
(Hence the weird toEqual array syntax in the code below\u2026)<\/small><\/p>\n
const match = '0abaa'.match(\/a(?<theB>b?)\/);\nexpect(match).toEqual([\n    0: 'ab', \/\/ Entire matched string\n    1: 'b',  \/\/ First captured group\n    groups: {theB: 'b'}, \/\/ Results of named groups (ES2018)\n    index: 1,\n    input: '0abaa'\n]);\n\n\/\/ Without the g flag, match behaves exactly like exec:\nconst exec = \/a(?<theB>b?)\/.exec('0abaa');\nexpect(exec).toEqual(match);\n<\/code><\/pre>\n
RegExp.prototype.exec<\/h2>\n
RegExp.prototype.exec<\/a><\/p>\n
When you need the capturing groups of all matches, it\u2019s exec<\/code> to the rescue.<\/p>\n
const globbing = \/(a)(b2?)\/g;\nconst input = 'ab_ab2';\n\/\/ Indexes     0  3  \n\nglobbing.exec(input);\n== Object.assign(['ab', 'a', 'b'], {index: 0});\n\nglobbing.exec(input);\n== Object.assign(['ab2', 'a', 'b2'], {index: 3});\n\nglobbing.exec(input);\n== null\n<\/code><\/pre>\n
RegExp.prototype.matchAll (ES2020)<\/small><\/h2>\n
RegExp.prototype.matchAll<\/a><\/p>\n
Easier matching and grouping, plus avoiding the while<\/code> loop necessary when using the \u201cold\u201d exec<\/code>.<\/p>\n
const regex = \/(a)(b2?)\/g; \/\/ TypeError when not g(lobal)!\nconst result = 'ab_ab2'.matchAll(regex);\n\nfor (const match of result) {\n  \/\/ First match: ['ab', 'a', 'b', index: 0, input: 'ab_ab2', groups: undefined]\n  \/\/ Second match: ['ab2', 'a', 'b2', index: 3, input: 'ab_ab2', groups: undefined]\n}\n<\/code><\/pre>\n
Flags<\/h1>\n
const rl = \/ab+c\/i;\nconst rc = new RegExp('ab+c', 'i');\n<\/code><\/pre>\n
Available flags<\/strong>:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Flag<\/th>\nProperty<\/th>\nRemarks<\/th>\nStackOverflow<\/th>\n<\/tr>\n<\/thead>\n
i<\/code><\/td>\n.ignoreCase<\/a><\/td>\nCase insensitive<\/td>\n<\/td>\n<\/tr>\n
g<\/code><\/td>\n.global<\/a><\/td>\nDo not stop at first match but find all of them<\/td>\n<\/td>\n<\/tr>\n
m<\/code><\/td>\n.multiline<\/a><\/td>\n^<\/code> and $<\/code> match beginning\/end of each line (otherwise of entire string)<\/td>\nStackOverflow<\/a><\/td>\n<\/tr>\n
s<\/code><\/td>\n.dotAll<\/a><\/td>\n.<\/code> matches newlines. (ES2018)<\/td>\n<\/td>\n<\/tr>\n
u<\/code><\/td>\n.unicode<\/a><\/td>\n\/^.$\/u.test('\ud83d\ude00')<\/code><\/td>\n<\/td>\n<\/tr>\n
v<\/code><\/td>\n.unicodeSets<\/a><\/td>\n\/^p{RGI_Emoji}$\/v.test('\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d\udc66')<\/code> (ES2024)<\/td>\n<\/td>\n<\/tr>\n
y<\/code><\/td>\n.sticky<\/a><\/td>\nUse .lastIndex<\/code> to match at that specific index only<\/strong> (overwrites the g<\/code> flag)<\/td>\nStackOverflow<\/a><\/td>\n<\/tr>\n
d<\/code><\/td>\n.hasIndices<\/a><\/td>\nAdds an indices<\/code> property to the match object that contains the start\/end indices of each capture group (2022)<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n.flags<\/a><\/td>\nReturns a string with the active flags<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
UnicodeSets<\/h2>\n
The v<\/code> flag doesn\u2019t just bring stuff like p{RGI_Emoji}<\/code> but also extensions to character classes.
 Checkout v8.dev<\/a> for a whole bunch of additional examples.<\/p>\n
Subtraction with --<\/code><\/h3>\n
\/\/ Only non-ascii numbers\n\/^[p{Decimal_Number}--[0-9]]+$\/v.test('012'); \/\/ false\n\/^[p{Decimal_Number}--[0-9]]+$\/v.test('\u0661\ud835\udfdc\u0969'); \/\/ true\n\n\/\/ Only consonants\n\/^[[a-z]--[aeoiu]]$\/v.test('q'); \/\/ true\n<\/code><\/pre>\n
Intersection with &&<\/code><\/h3>\n
\/\/ Only Arabic numbers\n\/^[p{Script=Arabic}&&p{Decimal_Number}]+$\/v.test('\u0661\u0662\u0663');\n\n\/\/ Only Greek letters\n\/[p{Script=Greek}&&p{Letter}]\/v.test('\u03bb'); \/\/ true\n\/[p{Script=Greek}&&p{Letter}]\/v.test('\u0384') \/\/ false\n\/[p{Script=Greek}]\/v.test(\"\u0384\"); \/\/ true\n\n\/\/ Only ascii symbols\n\/[p{Symbol}&&p{ASCII}]\/v.test('\u2713'); \/\/ false\n\/[p{Symbol}]\/v.test('\u2713'); \/\/ true\n<\/code><\/pre>\n
Less Common<\/h1>\n
const flags: string = \/a\/ig.flags; \/\/ \"gi\"\nconst src: string = \/a\/.source; \/\/ \"a\"\n<\/code><\/pre>\n
String.prototype.search<\/h2>\n
String.prototype.search<\/a><\/p>\n
A more powerful version of indexOf<\/code><\/a>. Returns -1<\/code> if no match.<\/p>\n
const index: number = \/a\/.search('a');\n<\/code><\/pre>\n
String.prototype.split<\/h2>\n
String.prototype.split<\/a><\/p>\n
Usually used in the form of something like 'a,b,c'.split(',')<\/code>. But also possible to split on regex matches.<\/p>\n
\"a,b;c\".split(\/,|;\/);\n\/\/ --> ['a', 'b', 'c']\n\n\/\/ Wrap in parentheses to include the separator.\n\"a,b;c\".split(\/(,|;)\/);\n\/\/ --> ['a', ',', 'b', ';', 'c']\n<\/code><\/pre>\n
RegExp.prototype.lastIndex<\/h2>\n
RegExp.prototype.lastIndex<\/a><\/p>\n
Used by exec<\/code>, test<\/code>, \u2026 with the global (g<\/code>) flag and for any of the above functions when using the sticky (y<\/code>) flag.<\/p>\n
const input = 'aab';\nconst regex = \/a\/g;\nregex.test(input); \/\/ Returns true. lastIndex is now 1\nregex.test(input); \/\/ Returns true. lastIndex is now 2\nregex.test(input); \/\/ Returns false. lastIndex is reset to 0\n<\/code><\/pre>\n
Also in this series<\/h1>\n