CODEWITHSUNDEEP
javascriptshim
someuser2491
someuser2491

Reputation: 1968

How to use the string.prototype.matchall polyfill?

I want String.prototype.matchAll() method to be working in edge browser as well. So thought of using the "string.prototype.matchall" npmjs package

I have installed this package and imported in my main.js file like so

import 'string.prototype.matchall';

I have to use this method in other file say Input.js. so I use like below

const matchAll = require('string.prototype.matchall');

And in the method where this I actually match the strings is below

replace = (original_string) => {
  const regex_pattern = /\\d+@*)]/g;
  const matchAll = require('string.prototype.matchall'); 
  const matches = original_string.matchAll(regex_pattern);
  return matches;
}

but matchAll variable is unused. How do I use this string.prototype.matchall polyfill. Could someone help me with this? Thanks.

Upvotes: 6

Views: 8161

Answers (4)

Joe Van Leeuwen
Joe Van Leeuwen

Reputation: 335

You can also use the exec RegExp method. Be aware that the RegExp pattern must use the global g flag to avoid an infinite loop.

function matchAll(re, str) {
  let match
  const matches = []

  while (match = re.exec(str)) {
    // add all matched groups
    matches.push(...match.slice(1))
  }

  return matches
}

Upvotes: 3

tom
tom

Reputation: 10529

The code example from @Joe freezes the browser for me unfortunately.

I need this polyfill for an old browser that doesn't know a spread operator.

Here the helper function slightly modified with example:

var str = 'my super <b>interesting</b> text is super <b>interesting</b>';

function matchAll(str, re) {
  re = new RegExp(re, 'g');
  var match;
  var matches = [];
  
  while (match = re.exec(str)) 
    matches.push(match);
    
  return matches;
}

console.log('log 1:', matchAll(str, 'interesting'));

(matchAll(str, 'interesting') || []).forEach(function(i) {
  // loop through matches and replace
  str = str.replace(i[0], 'boring')
});

console.log('log 2:', str);


// another usecase
console.log('log 3:', matchAll(str, '<b>(.+?)</b>'));

(matchAll(str, '<b>(.+?)</b>') || []).forEach(function(i) {
  // loop through matches and replace
  str = str.replace(i[0], '<u>' + i[1] + '</u>')
});

console.log('log 4:', str);

Upvotes: 0

Akintomiwa Opemipo
Akintomiwa Opemipo

Reputation: 419

I used this, works for me. Looping through the matches of global flagged pattern did the trick. Let me know if you have any issue using it, I will be glad to help.

function matchAll(pattern,haystack){
    var regex = new RegExp(pattern,"g")
    var matches = [];
    
    var match_result = haystack.match(regex);
    
    for (let index in match_result){
        var item = match_result[index];
        matches[index] = item.match(new RegExp(pattern)); 
    }
    return matches;
}

Upvotes: 8

Phil
Phil

Reputation: 164762

Because the package implements the es-shim API, you should call the shim() method...

require('foo').shim or require('foo/shim') is a function that when invoked, will call getPolyfill, and if the polyfill doesn’t match the built-in value, will install it into the global environment.

This will let you use String.prototype.matchAll().

const matchAll = require('string.prototype.matchall')
matchAll.shim()

const matches = original_string.matchAll(regex_pattern)

Otherwise, you can use it stand-alone

require('foo') is a spec-compliant JS or native function. However, if the function’s behavior depends on a receiver (a “this” value), then the first argument to this function will be used as that receiver. The package should indicate if this is the case in its README

const matchAll = require('string.prototype.matchall')

const matches = matchAll(original_string, regex_pattern)

To use an ES6 module import, you would use something like this at the top of your script (not within your replace function)

import shim from 'string.prototype.matchall/shim'
shim()

Upvotes: 5

Related Questions