Regular Expressions

 

 

Operators

Operator Description
* Zero or more
+ One or more
? Zero or one
{} Used to designate iterations i.e. a{4,10} means between 4 and 10.
\ Used to designate literals i.e. \* means a literal "*". Also used to designate special characters i.e. \t = tab, \n = newline, \ = space
^ Designates start
$ Designates end
. Natches any character like a wild card
[] Defines a set or class of characters. Certain characters lose their meaning such as *, $ and ^ which means NOT or !
| Used to designate an OR
() Used to designate groups of regular expressions. Can be used to return the results of the match within the parentheses. Useful for find and replace or programming.
& Used to replace text. Equivalent to \0 For more \0 to \9
 

Character Escape

The backslash character (\) in a regular expression indicates that the character that follows it either is a special character (as shown in the following table), or should be interpreted literally.

Escape Char Description
\t Matches a tab.
\r Matches a carriage return.
\n Matches a new line.
\w Matches any word character.
\W Matches any non-word character.
\s Matches any white-space character. Whitespace characters are defined as: formfeed, newline, crriage return, tab, vertical tab, nextline.
\S Matches any non-white-space character.
\d Matches any decimal digit.
\D Matches any character other than a decimal digit.
 

Anchors

Anchor Description
^ By default, the match must occur at the beginning of the string; in multiline mode, it must occur at the beginning of the line.
$ By default, the match must occur at the end of the string or before \n at the end of the string; in multiline mode, it must occur at the end of the line or before \n at the end of the line.
\A The match must occur at the beginning of the string only (no multiline support).
\Z The match must occur at the end of the string, or before \n at the end of the string.
\z The match must occur at the end of the string only.
\G The match must start at the position where the previous match ended, or if there was no previous match, at the position in the string where matching started.
\b The match must occur on a word boundary.
\B The match must not occur on a word boundary.
 

Groupings & REs

Group Description
[a-z] All lowercase letters.
[A-Za-z] All letters lowercase and uppercase.
[0-9] All digits.
[aeiouAEIOU] All vowels.
[^a-z] All letters that are not lowercase letters.
a(b|c|d)e ae, abe, ace or ade
a.o Matches "aro" in "around" and "abo" in "about" but not "acro" in "across"
a*r Matches "r" in "rack", "ar" in "ark", and "aar" in "aardvark"
c.*e Matches "cke" in "racket", "comme" in "comment", and "code" in "code"
e+d Matches "eed" in "feeder" and "ed" in "faded"
e.+e Matches "eede" in "feeder" but finds no matches in "feed"
\w*?d Matches "fad" and "ed" in "faded" but not the entire word "faded" due to the lazy match
e\w+? Matches "ee" in "asleep" and "ed" in "faded" but finds no matches in "fade"
^car Matches the word "car" only when it appears at the beginning of a line
car\r?$ Matches "car" only when it appears at the end of a line
b[abc] matches "ba", "bb", and "bc"
be[n-t] Matches "bet" in "between", "ben" in "beneath", and "bes" in "beside", but finds no matches in "below"
([a-z])X\1 Matches "aXa"and "bXb", but not "aXb". "\1" refers to the first expression group "[a-z]".
real(?!ity) Matches "real" in "realty" and "really" but not in "reality." It also finds the second "real" (but not the first "real") in "realityreal".
be[^n-t] Matches "bef" in "before", "beh" in "behind", and "bel" in "below", but finds no matches in "beneath"
(sponge|mud) bath Matches "sponge bath" and "mud bath"
\^ Matches the character ^
x(ab){2}x Matches "xababx"
x(ab){2,3}x Matches "xababx" and "xabababx" but not "xababababx"
\bin Uses word boundary. matches "in" in "inside" but finds no matches in "pinto"
End\r?\nBegin Matches "End" and "Begin" only when "End" is the last string in a line and "Begin" is the first string in the next line
a\wd Matches "add" and "a1d" but not "a d"
Public\sInterface Matches the phrase "Public Interface"
\d Matches "4" and "0" in "wd40"
 

Using REs to Replace Text In An Editor

A capture group delineates a subexpression of a regular expression and captures a substring of an input string. You can use captured groups within the regular expression itself (for example, to look for a repeated word), or in a replacement pattern.

To create a numbered capture group, surround the subexpression with parentheses in the regular expression pattern. Captures are numbered automatically from left to right based on the position of the opening parenthesis in the regular expression. To access the captured group:

The regular expression (\w+)\s\1 and a replacement string $1. Both the regular expression and the replacement pattern reference the first capture group that's automatically numbered 1. When you choose Replace all in the Quick Replace dialog box in Visual Studio, repeated words are removed from the text.

Text Reg Exp. Replacement Result
They said that that was the the correct answer. (\w+)\s\1 $1 They said that was the correct answer
 

Real World RE Replace Examples

Most often what I have used RE Replacement for, is to turn text into html encapsulated text.

Original Text

glyphicon glyphicon-asterisk glyphicon glyphicon-plus glyphicon glyphicon-minus glyphicon glyphicon-euro glyphicon glyphicon-cloud glyphicon glyphicon-envelope glyphicon glyphicon-scale glyphicon glyphicon-ice-lolly glyphicon glyphicon-ice-lolly-tasted


 

Regular Expression

(glyphicon glyphicon-)([A-Za-z-]+)


 

Replacement String

<span class="$1$2"></span>


 

Result

<span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-minus"></span> <span class="glyphicon glyphicon-euro"></span> <span class="glyphicon glyphicon-cloud"></span> <span class="glyphicon glyphicon-envelope"></span> <span class="glyphicon glyphicon-scale"></span> <span class="glyphicon glyphicon-ice-lolly"></span> <span class="glyphicon glyphicon-ice-lolly-tasted"></span>


 

Original Text

8592 2190 Leftwards Arrow 01W56 8593 2191 Upwards Arrow 23X77 8594 2192 Rightwards Arrow XA007 8595 2193 Downwards Arrow HD876 8596 2194 LeftRight Arrow MD877


 

Regular Expression

([0-9]{4})([ ]+)([0-9]{4})([ ]+)([A-Za-z]+)([ ]+)([A-Za-z]+)([ ]+)([0-9A-Za-z]{5})


 

Replacement String

<tr><th>$1</td><td>$3</td><td>$5</td><td>$7</td><td>$9</td></tr>


 

Result

<tr><th>8592</td><td>2190</td><td>Leftwards</td><td>Arrow</td><td>01W56</td></tr> <tr><th>8593</td><td>2191</td><td>Upwards</td><td>Arrow</td><td>23X77</td></tr> <tr><th>8594</td><td>2192</td><td>Rightwards</td><td>Arrow</td><td>XA007</td></tr> <tr><th>8595</td><td>2193</td><td>Downwards</td><td>Arrow</td><td>HD876</td></tr> <tr><th>8596</td><td>2194</td><td>LeftRight</td><td>Arrow</td><td>MD877</td></tr>


 

Original Text

This is to be done in several steps.

Fri, May 16, 2014 13 14 16 50 56 11 Tue, May 13, 2014 37 46 48 70 74 1 Fri, May 9, 2014 10 28 39 51 59 14


 

Regular Expression

First remove the text for the day of the week, the following comma and space.

([A-Za-z]{3}, )


 

Replacement String

(Empty)


 

Result

May 16, 2014 13 14 16 50 56 11 May 13, 2014 37 46 48 70 74 1 May 9, 2014 10 28 39 51 59 14


 

Search String

Replace the month abbreviation with a number.

May


 

Replace String

05


 

Current String

05 16, 2014 13 14 16 50 56 11 05 13, 2014 37 46 48 70 74 1 05 9, 2014 10 28 39 51 59 14


 

The Big RE

Breakdown Of Regular Expression: ([0-9]{2}) $1 - Month Number [ ]+ - Space ([0-9]{1,2}) $2 - Day Of Month , - Comma [ ]+ - Space ([0-9]{4}) $3 - Year [ ]+ - Space ([0-9]{1,2}) $4 - Pick 1 [ ]+ - Space ([0-9]{1,2}) $5 - Pick 2 [ ]+ - Space ([0-9]{1,2}) $6 - Pick 3 [ ]+ - Space ([0-9]{1,2}) $7 - Pick 4 [ ]+ - Space ([0-9]{1,2}) $8 - Pick 5 [ ]+ - Space ([0-9]{1,2}) $9 - Powerball


 

RE

([0-9]{2})[ ]+([0-9]{1,2}),[ ]+([0-9]{4})[ ]+([0-9]{1,2})[ ]+([0-9]{1,2})[ ]+([0-9]{1,2})[ ]+([0-9]{1,2})[ ]+([0-9]{1,2})[ ]+([0-9]{1,2})


 

Replace String

piLottoDraw '$6-$1-$3 23:00:00.000',105,$8,$10,$12,$14,$16,$18\nGO


 

Final Result

piLottoDraw '2014-05-16 23:00:00.000',105,13,14,16,50,56,11 GO piLottoDraw '2014-05-13 23:00:00.000',105,37,46,48,70,74,1 GO piLottoDraw '2014-05-9 23:00:00.000',105,10,28,39,51,59,14 GO


 

Original Text

We need to move the asterisk to the back of the text instead of in front of it.

* State * ZipCode * HomePhone * DayPhone * Email * ContactMethod


 

Regular Expression

([*]) ([A-Za-z]+)


 

Replacement String

$2 $1


 

Result

State * ZipCode * HomePhone * DayPhone * Email * ContactMethod *


 

Original Text

The Animals The Archies The Association The Band The Bee Gees The Box Tops The Byrds The Carpenters The Cascades The Cavaliers The Clash The Cure The Doobie Brothers The Doors The Drifters The Eagles The Everly Brothers The Gin Blossoms The Go Go's The Greatful Dead The Guess Who


 

Regular Expression

(The) ([A-Za-z ]+)


 

Replacement String

$2 $0


 

Result

Animals The Animals Archies The Archies Association The Association Band The Band Bee Gees The Bee Gees Box Tops The Box Tops Byrds The Byrds Carpenters The Carpenters Cascades The Cascades Cavaliers The Cavaliers Clash The Clash Cure The Cure Doobie Brothers The Doobie Brothers Doors The Doors Drifters The Drifters Eagles The Eagles Everly Brothers The Everly Brothers Gin Blossoms The Gin Blossoms Go Go The Go Go's Greatful Dead The Greatful Dead Guess Who The Guess Who


 

Original Text


 

Regular Expression


 

Replacement String


 

Result


 

Original Text


 

Regular Expression


 

Replacement String


 

Result


 


Regular Expressions & Javascript

Regular expressions are patterns used to match character combinations in strings.

In JavaScript, regular expressions are also objects.

RE & JS Flags

Before defining the methods, note that there are flags that modify the way many of the methods work.

Flag Description Corresponding Property
d Generate indices for substring matches. RegExp.prototype.hasIndices
g Global search. RegExp.prototype.global
i Case-insensitive search. RegExp.prototype.ignoreCase
m Multi-line search. RegExp.prototype.multiline
s Allows . to match newline characters. RegExp.prototypedotAll
u "unicode"; treat a pattern as a sequence of unicode code points. RegExp.prototype.unicode
y Perform a "sticky" search that matches starting at the current position in the target string. RegExp.prototype.sticky

Flag Syntax

const re = /pattern/flags;

Or

const re = new RegExp('pattern', 'flags');

 
 
 

Regular Expression Methods


RegEx - exec()

Sample Code

Description

Executes a search for a match in a string. It returns an array of information or null on a mismatch.

JavaScript RegExp objects are stateful when they have the global or sticky flags set (e.g. /foo/g or /foo/y). They store a lastIndex from the previous match. Using this internally, exec() can be used to iterate over multiple matches in a string of text (with capture groups), as opposed to getting just the matching strings with String.prototype.match().

When using exec(), the global flag has no effect when the sticky flag is set — the match is always sticky.

exec() is the primitive method of regexps. Many other regexp methods call exec() internally — including those called by string methods, like @@replace. While exec() itself is powerful (and is the most efficient), it often does not convey the intent most clearly.

  • If you only care whether the regex matches a string, but not what is actually being matched, use RegExp.prototype.test() instead.
     
  • If you are finding all occurrences of a global regex and you don't care about information like capturing groups, use String.prototype.match() instead. In addition, String.prototype.matchAll() helps to simplify matching multiple parts of a string (with capture groups) by allowing you to iterate over the matches.
     
  • If you are executing a match to find its index position in the string, use the String.prototype.search() method instead.
     

Syntax

exec(str)

Parameters

str The string against which to match the regular expression.

Returns

If the match fails, the exec() method returns null, and sets the regex's lastIndex to 0.

If the match succeeds, the exec() method returns an array and updates the lastIndex property of the regular expression object. The returned array has the matched text as the first item, and then one item for each capturing group of the matched text. The array also has the following additional properties:

index The 0-based index of the match in the string.
input The original string that was matched against.
groups An object of named capturing groups whose keys are the names and values are the capturing groups or undefined if no named capturing groups were defined. See capturing groups for more information.
indices (Optional) - This property is only present when the d flag is set. It is an array where each entry represents the bounds of a substring match. Each substring match itself is an array where the first entry represents its start index and the second entry its end index.
 
It additionally has a groups property which holds an object of all named capturing groups. The keys are the names of the capturing groups and each value is an array with the first item being the start entry and the second entry being the end index of the capturing group. If the regular expression doesn't contain any named capturing groups, groups is undefined.

RegEx - test()

Sample Code

Description

Tests for a match in a string. It returns true or false.

  • Use test() whenever you want to know whether a pattern is found in a string. test() returns a boolean, unlike the String.prototype.search() method (which returns the index of a match, or -1 if not found).
  • To get more information (but with slower execution), use the exec() method. (This is similar to the String.prototype.match() method.)
  • As with exec() (or in combination with it), test() called multiple times on the same global regular expression instance will advance past the previous match.

Syntax

test(str)

Parameters

str The string against which to match the regular expression.

Returns

true if there is a match between the regular expression and the string str. Otherwise, false.

String - match()

Sample Code

Description

Returns an array containing all of the matches, including capturing groups, or null if no match is found.

The implementation of String.prototype.match itself is very simple — it simply calls the Symbol.match method of the argument with the string as the first parameter. The actual implementation comes from RegExp.prototype[@@match]().

  • If you need to know if a string matches a regular expression RegExp, use RegExp.prototype.test().
  • If you only want the first match found, you might want to use RegExp.prototype.exec() instead.
  • If you want to obtain capture groups and the global flag is set, you need to use RegExp.prototype.exec() or String.prototype.matchAll() instead.

Syntax

match(regular_expression)

Parameters

regular_expression A regular expression object, or any object that has a Symbol.match method.
 
If regexp is not a RegExp object and does not have a Symbol.match method, it is implicitly converted to a RegExp by using new RegExp(regexp).
 
If you don't give any parameter and use the match() method directly, you will get an Array with an empty string: [""], because this is equivalent to match(/(?:)/).

Returns

An Array whose contents depend on the presence or absence of the global (g) flag, or null if no matches are found.
  • If the g flag is used, all results matching the complete regular expression will be returned, but capturing groups are not included.
  • If the g flag is not used, only the first complete match and its related capturing groups are returned. In this case, match() will return the same result as RegExp.prototype.exec() (an array with some extra properties).

String - matchAll()

Sample Code

Description

Returns an iterator containing all of the matches, including capturing groups.

The implementation of String.prototype.matchAll itself is very simple — it simply calls the Symbol.matchAll method of the argument with the string as the first parameter (apart from the extra input validation that the regex is global). The actual implementation comes from RegExp.prototype[@@matchAll]().

Syntax

matchAll(regular_expression)

Parameters

regular_expression A regular expression object, or any object that has a Symbol.matchAll method.
 
If regexp is not a RegExp object and does not have a Symbol.matchAll method, it is implicitly converted to a RegExp by using new RegExp(regexp, 'g').
 
If regexp is a RegExp object (via the IsRegExp check), then it must have the global (g) flag set, or a TypeError is thrown.
 

Returns

An iterable iterator (which is not restartable) of matches. Each match is an array with the same shape as the return value of RegExp.prototype.exec().

String - search()

Sample Code

Description

Tests for a match in a string. It returns the index of the match, or -1 if the search fails.

The implementation of String.prototype.search() itself is very simple — it simply calls the Symbol.search method of the argument with the string as the first parameter. The actual implementation comes from RegExp.prototype[@@search]().

The g flag of regexp has no effect on the search() result, and the search always happens as if the regex's lastIndex is 0. For more information on the behavior of search(), see RegExp.prototype[@@search]().

When you want to know whether a pattern is found, and also know its index within a string, use search().

  • If you only want to know if it exists, use the RegExp.prototype.test() method, which returns a boolean.
  • If you need the content of the matched text, use match() or RegExp.prototype.exec().

Syntax

search(regular_expression)

Parameters

regular_expression A regular expression object, or any object that has a Symbol.search method.
 
If regexp is not a RegExp object and does not have a Symbol.search method, it is implicitly converted to a RegExp by using new RegExp(regexp).

Returns

The index of the first match between the regular expression and the given string, or -1 if no match was found.

String - replace()

Sample Code

Description

Executes a search for a match in a string, and replaces the matched substring with a replacement substring.

The replace() method returns a new string with one, some, or all matches of a pattern replaced by a replacement.

The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match.

If pattern is a string, only the first occurrence will be replaced. The original string is left unchanged.

This method does not mutate the string value it's called on. It returns a new string.

A string pattern will only be replaced once. To perform a global search and replace, use a regular expression with the g flag, or use replaceAll() instead.

If pattern is an object with a Symbol.replace method (including RegExp objects), that method is called with the target string and replacement as arguments. Its return value becomes the return value of replace(). In this case the behavior of replace() is entirely encoded by the @@replace method — for example, any mention of "capturing groups" in the description below is actually functionality provided by RegExp.prototype[@@replace].

If the pattern is an empty string, the replacement is prepended to the start of the string.

"xxx".replace("", "_"); // "_xxx"

A regexp with the g flag is the only case where replace() replaces more than once.

Specifying a string as the replacement

The replacement string can include the following special replacement patterns:

PatternInserts
$$Inserts a "$".
$&Inserts the matched substring.
$`Inserts the portion of the string that precedes the matched substring.
$'Inserts the portion of the string that follows the matched substring.
$nInserts the nth (1-indexed) capturing group where n is a positive integer less than 100.
$<Name>Inserts the named capturing group where Name is the group name.

$n and $<Name> are only available if the pattern argument is a RegExp object. If the pattern is a string, or if the corresponding capturing group isn't present in the regex, then the pattern will be replaced as a literal. If the group is present but isn't matched (because it's part of a disjunction), it will be replaced with an empty string.

"foo".replace(/(f)/, "$2"); // "$2oo"; the regex doesn't have the second group "foo".replace("f", "$1"); // "$1oo" "foo".replace(/(f)|(g)/, "$2"); // "oo"; the second group exists but isn't matched

Specifying a function as the replacement

See Mozilla Site for more details.
 

Syntax

replace(pattern, replacement)

Parameters

pattern Can be a string or an object with a Symbol.replace method — the typical example being a regular expression. Any value that doesn't have the Symbol.replace method will be coerced to a string.
replacement Can be a string or a function.
 
If it's a string, it will replace the substring matched by pattern. A number of special replacement patterns are supported.
 
If it's a function, it will be invoked for every match and its return value is used as the replacement text.
 

Returns

A new string, with one, some, or all matches of the pattern replaced by the specified replacement.

String - replaceAll()

Sample Code

Description

Executes a search for all matches in a string, and replaces the matched substrings with a replacement substring.

The replaceAll() method returns a new string with all matches of a pattern replaced by a replacement.

The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match.

The original string is left unchanged.

This method does not mutate the string value it's called on. It returns a new string.

Unlike replace(), this method would replace all occurrences of a string, not just the first one. This is especially useful if the string is not statically known, as calling the RegExp() constructor without escaping special characters may unintentionally change its semantics.

If pattern is an object with a Symbol.replace method (including RegExp objects), that method is called with the target string and replacement as arguments. Its return value becomes the return value of replaceAll(). In this case the behavior of replaceAll() is entirely encoded by the @@replace method, and therefore will have the same result as replace() (apart from the extra input validation that the regex is global).

If the pattern is an empty string, the replacement will be inserted in between every UTF-16 code unit, similar to split() behavior.

"xxx".replaceAll("", "_"); // "_x_x_x_"

Syntax

replaceAll(pattern, replacement)

Parameters

pattern Can be a string or an object with a Symbol.replace method — the typical example being a regular expression. Any value that doesn't have the Symbol.replace method will be coerced to a string.
 
If pattern is a RegExp object (via the IsRegExp check), then it must have the global (g) flag set, or a TypeError is thrown.
replacement Can be a string or a function. The replacement has the same semantics as that of String.prototype.replace().

Returns

A new string, with all matches of a pattern replaced by a replacement.

String - split()

Sample Code

Description

Uses a regular expression or a fixed string to break a string into an array of substrings.

The split() method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.

If separator is a non-empty string, the target string is split by all matches of the separator without including separator in the results. For example, a string containing tab separated values (TSV) could be parsed by passing a tab character as the separator, like myString.split("\t").

If separator contains multiple characters, that entire character sequence must be found in order to split.

If separator appears at the beginning (or end) of the string, it still has the effect of splitting, resulting in an empty (i.e. zero length) string appearing at the first (or last) position of the returned array.

If separator does not occur in str, the returned array contains one element consisting of the entire string.

If separator is an empty string (""), str is converted to an array of each of its UTF-16 "characters", without empty strings on either ends of the resulting string.

Syntax

split()

split(separator)

split(separator, limit)

Parameters

separator The pattern describing where each split should occur.
 
Can be a string or an object with a Symbol.split method — the typical example being a regular expression.
 
If undefined, the original target string is returned wrapped in an array.
limit A non-negative integer specifying a limit on the number of substrings to be included in the array.
 
If provided, splits the string at each occurrence of the specified separator, but stops when limit entries have been placed in the array. Any leftover text is not included in the array at all.
 
  The array may contain fewer entries than limit if the end of the string is reached before the limit is reached.
  If limit is 0, [] is returned.

Returns

An Array of strings, split at each point where the separator occurs in the given string.

Constructing A Regular Expression In Javascript

You construct a regular expression in one of two ways:


Code Samples


RegEx - Test()

The pattern to test against.

/^\(?([0-9]){3}\)?(-|\s)?([0-9]){3}(-|\s)?([0-9]){4}(\s)?([a-zA-Z0-9])*$/;

What Is The Pattern Looking For Here


Javascript RegEx Test()

function validate1() { var testVal1 = document.getElementById("testVal1").value; var flag = false; var testRE = /^\(?([0-9]){3}\)?(-|\s)?([0-9]){3}(-|\s)?([0-9]){4}(\s)?([a-zA-Z0-9])*$/; flag = testRE.test(testVal1); if (flag) { alert("Valid Number"); } else { alert("Invalid Number"); } }

The javascript code descibed:


Javascript RegEx Exec()

The exec() method executes a search for a match in a specified string and returns a result array, or null.

In the following example the regular expression is looking for a pattern with a literal "d" followed by one or more of the letter "b" followed by another literal "d".

The "g" flag indicates that it is a global search.

The string being searched is: c d b b d b s b z

So you can see that there is a match to the pattern starting at the second letter in the string. The indices should be 1 in a zero based array.

const myRe = /d(b+)d/g; const myArray = myRe.exec('cdbbdbsbz');

Object Property or Index Description In This Example
myArray   The matched string and all remembered substrings. [ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ]
index The 0-based index of the match in the input string. 1
input The original string. 'cdbbdbsbz'
[0] The last matched characters. 'dbbd'
myRe lastIndex The index at which to start the next match.
(This property is set only if the regular expression uses the g option)
5
source The text of the pattern. Updated at the time that the regular expression is created, not executed. 'd(b+)d'


Javascript String Match()

The match() method retrieves the result of matching a string against a regular expression.

Return Value

An Array whose contents depend on the presence or absence of the global (g) flag, or null if no matches are found.

const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.'; const regex = /[A-Z]/g; const found = paragraph.match(regex); console.log(found); // expected output: Array ["T", "I"]

The following will search for upper case letters in a string and return an array of what it found.


Code Listing

function test_match1() { var testVal3 = document.getElementById("testVal3").value; var rsltStr = ""; const regex = /[A-Z]/g; const found = testVal3.match(regex); if (found !== null) { for (var index = 0; index < found.length; index++) { rsltStr += "found["+ index +"] = "+ found[index] +'\n'; } } alert(rsltStr); }


Javascript String MatchAll()

The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups.

Return Value

An iterable iterator (which is not restartable) of matches. Each match is an array with the same shape as the return value of RegExp.prototype.exec().


Code Listing

function test_matchall1() { var testVal3 = document.getElementById("testVal4").value; var rsltStr = ""; const regex = /t(e)(st(\d?))/g; const array = [...testVal3.matchAll(regex)]; var array2; if (array !== null) { for (var index = 0; index < array.length; index++) { array2 = array[index]; for (var index2 = 0; index2 < array2.length; index2++) { rsltStr += "array["+ index +"] = array2["+ index2 +"] = "+ array2[index2] +'\n'; } } } alert(rsltStr); }


The search() method executes a search for a match between a regular expression and this String object.

Return Value

The index of the first match between the regular expression and the given string, or -1 if no match was found.


Code Listing

Note that the escape characters in the regular expression \w - matches any word character, \s - matches any whitespace character (space, new line, carriage return, tab)

function test_search1() { var testVal5 = document.getElementById("testVal5").value; var rsltStr = ""; // any character that is not a word character or whitespace const regex = /[^\w\s]/g; rsltStr = testVal5.search(regex); alert(rsltStr); }


Javascript String Replace()

The replace() method returns a new string with one, some, or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced. The original string is left unchanged.

Syntax

replace(pattern, replacement)

Parameters

Returns

A new string, with one, some, or all matches of the pattern replaced by the specified replacement.

"foo".replace(/(f)/, "$2"); // "$2oo"; the regex doesn't have the second group "foo".replace("f", "$1"); // "$1oo" "foo".replace(/(f)|(g)/, "$2"); // "oo"; the second group exists but isn't matched

Specifying a function as the replacement

You can specify a function as the second parameter. In this case, the function will be invoked after the match has been performed. The function's result (return value) will be used as the replacement string.

Replace Example 1

Using a function as replacement example


Replace Example 1

function replacer(match, p1, p2, p3, offset, string) { return [p1, p2, p3].join(' - '); } function test_replace1() { var testVal6 = document.getElementById("testVal6").value; var rsltStr = ""; const regex = /([^\d]*)(\d*)([^\w]*)/; rsltStr = testVal6.replace(regex, replacer); alert(rsltStr); }

 

Replace Example 2


Code Listing

function test_replace2() { var testVal7 = document.getElementById("testVal7").value; var rsltStr = ""; const regex = /xmas/i; rsltStr = testVal7.replace(regex, 'Christmas...'); alert(rsltStr); }

Replace Example 3


Code Listing

function test_replace3() { var testVal8 = document.getElementById("testVal8").value; var rsltStr = ""; const regex = /apples/gi; rsltStr = testVal8.replace(regex, 'oranges'); alert(rsltStr); }

Replace Example 4


Code Listing

This really highlights the power of using regular expressions.

function test_replace4() { var testVal9 = document.getElementById("testVal9").value; var rsltStr = ""; const regex = /(\w+)\s(\w+)/; rsltStr = testVal9.replace(regex, '$2, $1'); alert(rsltStr); }

Replace Example 5


Code Listing

This converts a camel case property into a hyphenated property.

function styleHyphenFormat(propertyName) { function upperToHyphenLower(match, offset, string) { return (offset > 0 ? '-' : '') + match.toLowerCase(); } return propertyName.replace(/[A-Z]/g, upperToHyphenLower); } function test_replace5() { var testValA = document.getElementById("testValA").value; var rsltStr = styleHyphenFormat(testValA); alert(rsltStr); }


Javascript String ReplaceAll() - 1


Code Listing

function test_replaceAll1() { var testVal21 = document.getElementById("testVal21").value; var rsltStr = testVal21.replaceAll('dog','monkey'); const regex = /Dog/ig; rsltStr += testVal21.replaceAll(regex,'turtle');; alert(rsltStr); }

Javascript String ReplaceAll() - 2


Code Listing

function unsafeRedactName(text, name) { return text.replace(new RegExp(name, 'g'), '[REDACTED]'); } function safeRedactName(text, name) { return text.replaceAll(name, '[REDACTED]'); } function test_replaceAll2() { var testVal22 = document.getElementById("testVal22").value; var hackerName = "ha.*er"; var rsltStr = unsafeRedactName(testVal22,hackerName) + '\n'; rsltStr += safeRedactName(testVal22,hackerName); alert(rsltStr); }


Javascript String Split()


Code Listing

function test_split1() { var testVal31 = document.getElementById("testVal31").value; const words = testVal31.split(' '); var rsltStr = ""; for (var i=0; i < words.length; i++) { rsltStr += words[i] + '\n'; } alert(rsltStr); } function test_split2() { var testVal31 = document.getElementById("testVal31").value; const chars = testVal31.split(''); var rsltStr = ""; for (var i=0; i < chars.length; i++) { rsltStr += chars[i] + "-"; } alert(rsltStr); } function test_split3() { var testVal31 = document.getElementById("testVal31").value; const strCopy = testVal31.split(); var rsltStr = ""; for (var i=0; i < strCopy.length; i++) { rsltStr += strCopy[i] + '\n'; } alert(rsltStr); }

Javascript String Split() - 2


Code Listing

function test_split4() { var testVal32 = document.getElementById("testVal32").value; const re = /\s*(?:;|$)\s*/; const arRslt = testVal32.split(re); var rsltStr = ""; for (var i=0; i < arRslt.length; i++) { rsltStr += arRslt[i] + '\n'; } alert(rsltStr); } function test_split5() { var testVal32 = document.getElementById("testVal32").value; const re = /\s*(?:;|$)\s*/; const arRslt = testVal32.split(re,3); var rsltStr = ""; for (var i=0; i < arRslt.length; i++) { rsltStr += arRslt[i] + '\n'; } alert(rsltStr); }

Javascript String Split() - 3


Code Listing

function test_split6() { var testVal33 = document.getElementById("testVal33").value; const re = /(\d)/; const arRslt = testVal33.split(re); var rsltStr = ""; for (var i=0; i < arRslt.length; i++) { rsltStr += arRslt[i] + '\n'; } alert(rsltStr); }

Javascript String Split() - 4


Code Listing

function test_split7() { var testVal34 = document.getElementById("testVal34").value; var rsltStr = ""; const splitByNumber = { [Symbol.split](str) { let num = 1; let pos = 0; const result = []; while (pos < str.length) { const matchPos = str.indexOf(num, pos); if (matchPos === -1) { result.push(str.substring(pos)); break; } result.push(str.substring(pos, matchPos)); pos = matchPos + String(num).length; num++; } return result; } }; rsltStr = testVal34.split(splitByNumber); alert(rsltStr); }

Javascript String Split() - 5

Code Listing

function test_split9() { var taSource = document.getElementById("taSource1").value; var taResult = document.getElementById("taResult1"); const re = /<[//a-zA-Z]+>/; const oneline = taSource.replaceAll('\n','') const arRslt = oneline.split(re); taResult.value = "Array Length"+ arRslt.length +'\n'; for (var i=0; i < arRslt.length; i++) { if (arRslt[i].trim() != '') { taResult.value += "arRslt["+ i +"] = "+ arRslt[i] + '\n'; } } //alert(rsltStr); }

Javascript String Split() - 6

Code Listing