React Native: .matchAll is not a function

Question

I get a weird error when running my React Native app:

Some sample code:

const { url } = <incoming object>;
const reURL   = <my regex>;

console.debug('url:', url);
console.debug('typeof url:', typeof url);

matches = [...url.matchAll(reURL)];

Log output:

url: <as expected>
typeof url: string

Error message:

TypeError: url.matchAll is not a function. (In 'url.matchAll(reURL)', 'url.matchAll' is undefined)

Everything works fine on iOS, the error only occurs on Android.

Pretty up to date environment, updated all npm packages a couple of days ago.

Does anyone have the slightest idea where to even begin searching for a solution ?

Does this answer your question? [RegEx to extract all matches from string using RegExp.exec](https://stackoverflow.com/questions/6323417/regex-to-extract-all-matches-from-string-using-regexp-exec) — Kia Kaha, Nov 07 '22 at 11:52

score 1 · Answer 1 · edited Nov 27 '20 at 12:39

1

I have the same issue. String.matchAll does not work for Android. You should use match instead matchAll.

Example:

const regex = new RegExp(text, 'ig');
const arr = string.match(regex);

You will get an array match regex

edited Nov 27 '20 at 12:39

Thân LƯƠNG Đình

3,082
2
11
21

answered Nov 27 '20 at 08:17

Nguyễn Thị Thúy

23
2

2

string.match does not function the same way as matchAll at all. A `match` on multiple values simply returns an array of those values. `matchAll` returns an iterator whose values objects with the position of each match in the string and can also handle multiple capture groups which `match` also cannot. So yeah, `match` is not a replacement for `matchAll` which is much more useful. – Christopher Reid Dec 09 '20 at 22:38

score 1 · Answer 2 · answered Jun 02 '21 at 07:57

1

You can use string.prototype.matchall to polyfill.

https://www.npmjs.com/package/string.prototype.matchall

import matchAll from 'string.prototype.matchAll'

matchAll.shim()

answered Jun 02 '21 at 07:57

foloinfo

631
8
19

score 0 · Answer 3 · answered Sep 23 '22 at 17:32

For us, this issue was solved by conditionally evaluating matchAll:

ourSring.matchAll?.(expr);

Our working theory is that the first time this method is accessed, some native async regex initialization is run, but takes some time to bind the method, resulting in undefined matchAll method. Subsequent evaluations work properly for us.

Kia Kaha · Answer 4 · 2022-11-07T14:22:51.673

Replacing the call to str.matchAll(regex) with the recursive function in this answer did the job perfectly for me.

Pasting here the function with TS support for completeness:

/**
 * Recursive function which replaces the usage of `str.matchAll(regex)` which happens to be troublesome on Android once compiled.
 * @param regex - regex expression to be executed. If passed with the `/g` global flag the result will return all matches.
 * @param str - string value to be searched for matches by the regex expression
 * @param matches - parameter used to pass on the current resulting array through recursion iterations
 * @returns array of all matches found while executing the regex
 */
export function findAllMatches(regex: RegExp, str: string, matches: RegExpExecArray[] = []) {
  const res = regex.exec(str)
  res && matches.push(res) && findAllMatches(regex, str, matches)
  return matches
}

Ensuring nobody in the codebase would try to use matchAll again could be achieved by adding the following es-lint rule:

"no-restricted-syntax": ["error", {
   "selector": "CallExpression[callee.property.name='matchAll']",
   "message": "You should use the findAllMatches function instead."
}]

React Native: .matchAll is not a function

4 Answers4

Linked