Jak mogę dopasować wiele wystąpień do wyrażenia regularnego w JavaScript podobnego do preg_match_all () w PHP?

Próbuję przeanalizować ciągi zakodowane w postaci adresu URL, które składają się z par klucz = wartość oddzielonych przez albo &lub &.

Poniższe elementy dopasują tylko pierwsze wystąpienie, dzieląc klucze i wartości na oddzielne elementy wyników:

var result = mystring.match(/(?:&|&)?([^=]+)=([^&]+)/)

Wyniki dla ciągu „1111342 = Adam% 20Franco & 348572 = Bob% 20Jones” byłyby następujące:

['1111342', 'Adam%20Franco']

Użycie flagi globalnej „g” spowoduje dopasowanie wszystkich wystąpień, ale zwróci tylko w pełni dopasowane podciągi, a nie rozdzielone klucze i wartości:

var result = mystring.match(/(?:&|&)?([^=]+)=([^&]+)/g)

Wyniki dla ciągu „1111342 = Adam% 20Franco & 348572 = Bob% 20Jones” byłyby następujące:

['1111342=Adam%20Franco', '&348572=Bob%20Jones']

Chociaż mógłbym podzielić ciąg &i rozdzielić każdą parę klucz / wartość osobno, czy istnieje sposób, aby użyć obsługi wyrażeń regularnych JavaScript, aby dopasować wiele wystąpień wzorca, /(?:&|&)?([^=]+)=([^&]+)/podobnie jak preg_match_all()funkcja PHP ?

Staram się znaleźć jakiś sposób, aby uzyskać wyniki z oddzielnymi dopasowaniami, na przykład:

[['1111342', '348572'], ['Adam%20Franco', 'Bob%20Jones']]

lub

[['1111342', 'Adam%20Franco'], ['348572', 'Bob%20Jones']]

Podniesiony z komentarzy

Komentarz 2020: zamiast używać wyrażenia regularnego, mamy teraz URLSearchParams, który robi to wszystko za nas, więc żaden niestandardowy kod, nie mówiąc już o wyrażeniu regularnym, nie jest już potrzebny.

- Mike 'Pomax' Kamermans

Obsługę przeglądarek można znaleźć tutaj https://caniuse.com/#feat=urlsearchparams

Sugerowałbym alternatywne wyrażenie regularne, wykorzystujące podgrupy do przechwytywania nazw i wartości parametrów indywidualnie oraz re.exec():

function getUrlParams(url) {
  var re = /(?:\?|&(?:amp;)?)([^=&#]+)(?:=?([^&#]*))/g,
      match, params = {},
      decode = function (s) {return decodeURIComponent(s.replace(/\+/g, " "));};

  if (typeof url == "undefined") url = document.location.href;

  while (match = re.exec(url)) {
    params[decode(match[1])] = decode(match[2]);
  }
  return params;
}

var result = getUrlParams("http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=Frankfurt+am+Main&sll=50.106047,8.679886&sspn=0.370369,0.833588&ie=UTF8&ll=50.116616,8.680573&spn=0.35972,0.833588&z=11&iwloc=addr");

result jest obiektem:

{
  f: „q”
  geokod: „”
  hl: "de"
  tj .: „UTF8”
  iwloc: "addr"
  ll: „50.116616,8.680573”
  q: „Frankfurt nad Menem”
  sll: „50.106047,8.679886”
  źródło: „s_q”
  spn: „0.35972,0.833588”
  sspn: „0.370369,0.833588”
  z: „11”
}

Wyrażenie regularne rozkłada się w następujący sposób:

(?: # grupa nieprzechwytująca
  \? | & # "?" lub „&”
  (?: amp;)? # (zezwól na „& amp;” w przypadku błędnie zakodowanych adresów URL w formacie HTML)
) # koniec grupy bez przechwytywania
( # Grupa 1
  [^ = & #] + # dowolny znak oprócz „=”, „&” lub „#”; przynajmniej raz
) # end group 1 - będzie to nazwa parametru
(?: # grupa nieprzechwytująca
  =? # an "=", opcjonalnie
  (# grupa 2
    [^ & #] * # dowolny znak oprócz „&” lub „#”; dowolną liczbę razy
  ) # end group 2 - będzie to wartość parametru
) # koniec grupy bez przechwytywania

Do wyszukiwania globalnego musisz użyć przełącznika „g”

var result = mystring.match(/(&|&)?([^=]+)=([^&]+)/g)

Edycja 2020

Użyj URLSearchParams , ponieważ ta praca nie wymaga już żadnego niestandardowego kodu. Przeglądarki mogą to zrobić za Ciebie za pomocą jednego konstruktora:

const str = "1111342=Adam%20Franco&348572=Bob%20Jones";
const data = new URLSearchParams(str);
for (pair of data) console.log(pair)

plony

Array [ "1111342", "Adam Franco" ]
Array [ "348572", "Bob Jones" ]

Nie ma więc powodu, aby używać do tego regex.

Oryginalna odpowiedź

Jeśli nie chcesz polegać na „dopasowywaniu na ślepo”, które towarzyszy execdopasowaniu stylu, JavaScript ma wbudowaną funkcję dopasowywania wszystkiego, ale jest częścią replacewywołania funkcji, gdy używa się opcji „co zrobić z przechwytywaniem funkcja obsługi grup :

var data = {};

var getKeyValue = function(fullPattern, group1, group2, group3) {
  data[group2] = group3;
};

mystring.replace(/(?:&|&)?([^=]+)=([^&]+)/g, getKeyValue);

Gotowe.

Zamiast używać funkcji obsługi grup przechwytywania do faktycznego zwracania ciągów zastępczych (w celu obsługi zamiany pierwszy argument jest pełnym dopasowaniem wzorca, a kolejne argumenty są indywidualnymi grupami przechwytywania), po prostu bierzemy przechwytywania grup 2 i 3 i buforujemy tę parę.

Tak więc, zamiast pisać skomplikowane funkcje analizujące, pamiętaj, że funkcja „matchAll” w JavaScript jest po prostu „zastąpieniem” zastępczą funkcją obsługi i można uzyskać znaczną wydajność dopasowywania wzorców.

Do przechwytywania grup jestem przyzwyczajony do używania preg_match_allw PHP i próbowałem tutaj odtworzyć jego funkcjonalność:

<script>

// Return all pattern matches with captured groups
RegExp.prototype.execAll = function(string) {
    var match = null;
    var matches = new Array();
    while (match = this.exec(string)) {
        var matchArray = [];
        for (i in match) {
            if (parseInt(i) == i) {
                matchArray.push(match[i]);
            }
        }
        matches.push(matchArray);
    }
    return matches;
}

// Example
var someTxt = 'abc123 def456 ghi890';
var results = /[a-z]+(\d+)/g.execAll(someTxt);

// Output
[["abc123", "123"],
 ["def456", "456"],
 ["ghi890", "890"]]

</script>

Ustaw gmodyfikator dla dopasowania globalnego:

/…/g

Źródło:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec

Znajdowanie kolejnych dopasowań

Jeśli Twoje wyrażenie regularne używa flagi „g”, możesz użyć metody exec () wiele razy, aby znaleźć kolejne dopasowania w tym samym ciągu. Gdy to zrobisz, wyszukiwanie rozpocznie się od podłańcucha ciągu określonego przez właściwość lastIndex wyrażenia regularnego (test () również przesunie właściwość lastIndex). Na przykład załóżmy, że masz ten skrypt:

var myRe = /ab*/g;
var str = 'abbcdefabh';
var myArray;
while ((myArray = myRe.exec(str)) !== null) {
  var msg = 'Found ' + myArray[0] + '. ';
  msg += 'Next match starts at ' + myRe.lastIndex;
  console.log(msg);
}

Ten skrypt wyświetla następujący tekst:

Found abb. Next match starts at 3
Found ab. Next match starts at 912

Uwaga: Nie umieszczaj literału wyrażenia regularnego (ani konstruktora RegExp) w warunku while, ponieważ spowoduje to utworzenie nieskończonej pętli, jeśli istnieje dopasowanie, ponieważ właściwość lastIndex jest resetowana po każdej iteracji. Upewnij się również, że flaga globalna jest ustawiona, w przeciwnym razie również wystąpi pętla.

Jeśli ktoś (taki jak ja) potrzebuje metody Tomalaka z obsługą tablic (czyli wielokrotnego wyboru), oto ona:

function getUrlParams(url) {
  var re = /(?:\?|&(?:amp;)?)([^=&#]+)(?:=?([^&#]*))/g,
      match, params = {},
      decode = function (s) {return decodeURIComponent(s.replace(/\+/g, " "));};

  if (typeof url == "undefined") url = document.location.href;

  while (match = re.exec(url)) {
    if( params[decode(match[1])] ) {
        if( typeof params[decode(match[1])] != 'object' ) {
            params[decode(match[1])] = new Array( params[decode(match[1])], decode(match[2]) );
        } else {
            params[decode(match[1])].push(decode(match[2]));
        }
    }
    else
        params[decode(match[1])] = decode(match[2]);
  }
  return params;
}
var urlParams = getUrlParams(location.search);

Wejście ?my=1&my=2&my=things

wynik 1,2,things(wcześniej zwrócone tylko: rzeczy)

Aby pozostać przy proponowanym pytaniu wskazanym w tytule, możesz iterować po każdym dopasowaniu w ciągu za pomocą String.prototype.replace(). Na przykład poniższe robi właśnie to, aby uzyskać tablicę wszystkich słów na podstawie wyrażenia regularnego:

function getWords(str) {
  var arr = [];
  str.replace(/\w+/g, function(m) {
    arr.push(m);
  });
  return arr;
}

var words = getWords("Where in the world is Carmen Sandiego?");
// > ["Where", "in", "the", "world", "is", "Carmen", "Sandiego"]

Gdybym chciał uzyskać grupy przechwytywania lub nawet indeks każdego dopasowania, też mógłbym to zrobić. Poniżej pokazano, jak każde dopasowanie jest zwracane z całym dopasowaniem, pierwszą grupą przechwytywania i indeksem:

function getWords(str) {
  var arr = [];
  str.replace(/\w+(?=(.*))/g, function(m, remaining, index) {
    arr.push({ match: m, remainder: remaining, index: index });
  });
  return arr;
}

var words = getWords("Where in the world is Carmen Sandiego?");

Po uruchomieniu powyższego wordsbędzie wyglądał następująco:

[
  {
    "match": "Where",
    "remainder": " in the world is Carmen Sandiego?",
    "index": 0
  },
  {
    "match": "in",
    "remainder": " the world is Carmen Sandiego?",
    "index": 6
  },
  {
    "match": "the",
    "remainder": " world is Carmen Sandiego?",
    "index": 9
  },
  {
    "match": "world",
    "remainder": " is Carmen Sandiego?",
    "index": 13
  },
  {
    "match": "is",
    "remainder": " Carmen Sandiego?",
    "index": 19
  },
  {
    "match": "Carmen",
    "remainder": " Sandiego?",
    "index": 22
  },
  {
    "match": "Sandiego",
    "remainder": "?",
    "index": 29
  }
]

Aby dopasować wiele wystąpień podobnych do tego, co jest dostępne w PHP preg_match_all, możesz użyć tego typu myślenia, aby stworzyć własne lub użyć czegoś podobnego YourJS.matchAll(). YourJS mniej więcej definiuje tę funkcję w następujący sposób:

function matchAll(str, rgx) {
  var arr, extras, matches = [];
  str.replace(rgx.global ? rgx : new RegExp(rgx.source, (rgx + '').replace(/[\s\S]+\//g , 'g')), function() {
    matches.push(arr = [].slice.call(arguments));
    extras = arr.splice(-2);
    arr.index = extras[0];
    arr.input = extras[1];
  });
  return matches[0] ? matches : null;
}

Jeśli możesz uciec z korzystaniem z maptego, jest to rozwiązanie czteroliniowe:

var mystring = '1111342=Adam%20Franco&348572=Bob%20Jones';

var result = mystring.match(/(&|&)?([^=]+)=([^&]+)/g) || [];
result = result.map(function(i) {
  return i.match(/(&|&)?([^=]+)=([^&]+)/);
});

console.log(result);

Nie jest ładny, nie jest wydajny, ale przynajmniej jest kompaktowy. ;)

Zastosowanie window.URL:

> s = 'http://www.example.com/index.html?1111342=Adam%20Franco&348572=Bob%20Jones'
> u = new URL(s)
> Array.from(u.searchParams.entries())
[["1111342", "Adam Franco"], ["348572", "Bob Jones"]]

Hеllo od 2020 roku. Zwrócę uwagę na String.prototype.matchAll () :

let regexp = /(?:&|&)?([^=]+)=([^&]+)/g;
let str = '1111342=Adam%20Franco&348572=Bob%20Jones';

for (let match of str.matchAll(regexp)) {
    let [full, key, value] = match;
    console.log(key + ' => ' + value);
}

Wyjścia:

1111342 => Adam%20Franco
348572 => Bob%20Jones

Aby przechwycić kilka parametrów o tej samej nazwie, zmodyfikowałem pętlę while w metodzie Tomalaka w następujący sposób:

  while (match = re.exec(url)) {
    var pName = decode(match[1]);
    var pValue = decode(match[2]);
    params[pName] ? params[pName].push(pValue) : params[pName] = [pValue];
  }

Wejście: ?firstname=george&lastname=bush&firstname=bill&lastname=clinton

zwroty: {firstname : ["george", "bill"], lastname : ["bush", "clinton"]}

Cóż ... Miałem podobny problem ... Chcę wyszukiwania przyrostowego / krokowego za pomocą RegExp (np .: rozpocznij wyszukiwanie ... wykonaj jakieś przetwarzanie ... kontynuuj wyszukiwanie do ostatniego dopasowania)

Po wielu poszukiwaniach w Internecie ... jak zawsze (to teraz staje się nawykiem) ląduję w StackOverflow i znalazłem odpowiedź ...

To, czego nie ma, a sprawy, o których należy wspomnieć, to „ lastIndex” Teraz rozumiem, dlaczego obiekt RegExp implementuje właściwość „ lastIndex”

Dzielenie wygląda dla mnie na najlepszą opcję:

'1111342=Adam%20Franco&348572=Bob%20Jones'.split('&').map(x => x.match(/(?:&|&)?([^=]+)=([^&]+)/))

Aby uniknąć piekła wyrażeń regularnych, możesz znaleźć swoje pierwsze dopasowanie, odetnij kawałek, a następnie spróbuj znaleźć następny na podłańcuchu. W C # wygląda to mniej więcej tak, przepraszam, że nie przeniosłem go do JavaScript.

        long count = 0;
        var remainder = data;
        Match match = null;
        do
        {
            match = _rgx.Match(remainder);
            if (match.Success)
            {
                count++;
                remainder = remainder.Substring(match.Index + 1, remainder.Length - (match.Index+1));
            }
        } while (match.Success);
        return count;