ฉันจะจับคู่การเกิดขึ้นหลายครั้งกับ regex ใน JavaScript คล้ายกับ preg_match_all ของ PHP ได้อย่างไร

ฉันพยายามที่จะสตริงเข้ารหัส URL แยกที่มีการสร้างขึ้นของคีย์ = คู่ค่าแยกจากกันโดยทั้งสองหรือ&&

รายการต่อไปนี้จะจับคู่เหตุการณ์ที่เกิดขึ้นครั้งแรกโดยแยกคีย์และค่าออกเป็นองค์ประกอบผลลัพธ์แยกต่างหาก:

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

ผลลัพธ์สำหรับสตริง '1111342 = Adam% 20Franco & 348572 = Bob% 20Jones' จะเป็น:

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

การใช้ค่าสถานะโกลบอล 'g' จะจับคู่กับสิ่งที่เกิดขึ้นทั้งหมด แต่จะคืนค่าสตริงย่อยที่จับคู่อย่างสมบูรณ์ไม่ใช่คีย์และค่าที่คั่นด้วย:

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

ผลลัพธ์สำหรับสตริง '1111342 = Adam% 20Franco & 348572 = Bob% 20Jones' จะเป็น:

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

ในขณะที่ฉันสามารถแยกสตริง&และแยกแต่ละคู่คีย์ / ค่าแต่ละมีวิธีการใช้การสนับสนุนการแสดงออกปกติของ JavaScript เพื่อให้ตรงกับหลายรูปแบบ/(?:&|&)?([^=]+)=([^&]+)/คล้ายกับpreg_match_all()ฟังก์ชั่นของ PHP ?

ฉันตั้งเป้าหมายที่จะรับผลลัพธ์จากการแยกย่อยการแข่งขัน:

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

หรือ

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

ยกจากความคิดเห็น

2020 ความคิดเห็น: แทนที่จะใช้ regex ตอนนี้เรามีURLSearchParamsทั้งหมดนี้เพื่อเราดังนั้นจึงไม่จำเป็นต้องใช้รหัสที่กำหนดเอง regex เพียงอย่างเดียวอีกต่อไป

- Kamermans ของไมค์ 'Pomax'

การสนับสนุนเบราว์เซอร์อยู่ที่นี่https://caniuse.com/#feat=urlsearchparams

ฉันขอแนะนำ regex ทางเลือกโดยใช้กลุ่มย่อยเพื่อจับชื่อและความคุ้มค่าของพารามิเตอร์เป็นรายบุคคลและ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 เป็นวัตถุ:

{
  f: "q"
  รหัสภูมิศาสตร์: ""
  hl: "de"
  เช่น: "UTF8"
  iwloc: "addr"
  ll: "50.116616,8.680573"
  q: "Frankfurt am Main"
  sll: "50.106047,8.679886"
  แหล่งที่มา: "s_q"
  spn: "0.35972,0.833588"
  sspn: "0.370369,0.833588"
  z: "11"
}

regex แบ่งออกเป็นดังนี้:

(?: # กลุ่มที่ไม่ได้จับภาพ
  \? | & # "?" หรือ "&"
  (: amp;?)? # (อนุญาต "& amp;" สำหรับ URL ที่เข้ารหัส HTML อย่างไม่ถูกต้อง)
) # end กลุ่มที่ไม่ถูกจับภาพ
(# กลุ่ม 1
  [^ = & #] + # ตัวละครใด ๆ ยกเว้น "=", "&" หรือ "#"; อย่างน้อยหนึ่งครั้ง
) # end group 1 - นี่จะเป็นชื่อของพารามิเตอร์
(?: # กลุ่มที่ไม่ได้จับภาพ
  =? # an "=" เป็นตัวเลือก
  (# กลุ่ม 2
    [^ & #] * # ตัวละครใด ๆ ยกเว้น "&" หรือ "#"; จำนวนครั้งใด ๆ
  ) # end group 2 - นี่จะเป็นค่าของพารามิเตอร์
) # end กลุ่มที่ไม่ถูกจับภาพ

คุณต้องใช้สวิตช์ 'g' เพื่อการค้นหาทั่วโลก

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

พ.ศ. 2563

ใช้URLSearchParamsเนื่องจากงานนี้ไม่ต้องการรหัสที่กำหนดเองอีกต่อไป เบราว์เซอร์สามารถทำสิ่งนี้เพื่อคุณด้วยตัวสร้างเดียว:

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

อัตราผลตอบแทน

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

ดังนั้นจึงไม่มีเหตุผลที่จะใช้ regex อีกต่อไป

คำตอบเดิม

หากคุณไม่ต้องการใช้ "การจับคู่แบบไม่เจาะจง" ที่มาพร้อมกับการexecจับคู่สไตล์การเรียกใช้จาวาสคริปต์จะมาพร้อมกับฟังก์ชั่นการจับคู่ทั้งหมดในตัว แต่เป็นส่วนหนึ่งของการreplaceเรียกใช้ฟังก์ชันเมื่อใช้ "การจับภาพฟังก์ชั่นการจัดการกลุ่ม " :

var data = {};

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

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

เสร็จแล้ว

แทนที่จะใช้ฟังก์ชั่นการจัดการกลุ่มการดักจับเพื่อส่งคืนสตริงการแทนที่ (สำหรับการจัดการแบบแทนที่ ARG แรกคือการจับคู่รูปแบบเต็มรูปแบบและ args ที่ตามมาคือกลุ่มการจับภาพเดี่ยว ๆ ) เราเพียงจับกลุ่ม 2 และ 3 และแคชนั้น

ดังนั้นแทนที่จะเขียนฟังก์ชันการแยกวิเคราะห์ที่ซับซ้อนโปรดจำไว้ว่าฟังก์ชั่น "จับคู่ทั้งหมด" ใน JavaScript เป็นเพียง "แทนที่" ด้วยฟังก์ชั่นการจัดการทดแทนและประสิทธิภาพการจับคู่รูปแบบมากสามารถมี

สำหรับการจับภาพกลุ่มฉันคุ้นเคยกับการใช้preg_match_allใน PHP และฉันพยายามทำซ้ำการทำงานของมันที่นี่:

<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>

ตั้งค่าgตัวปรับสำหรับการจับคู่แบบโกลบอล:

/…/g

ที่มา:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec

ค้นหาการแข่งขันที่ต่อเนื่อง

หากนิพจน์ปกติของคุณใช้การตั้งค่าสถานะ "g" คุณสามารถใช้เมธอด exec () หลายครั้งเพื่อค้นหาการจับคู่แบบต่อเนื่องในสตริงเดียวกัน เมื่อคุณทำเช่นนั้นการค้นหาจะเริ่มต้นที่สตริงย่อยของ str ที่ระบุโดยคุณสมบัติ lastIndex ของนิพจน์ปกติ (test () จะทำการเลื่อนคุณสมบัติ lastIndex ด้วยเช่นกัน ตัวอย่างเช่นสมมติว่าคุณมีสคริปต์นี้:

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);
}

สคริปต์นี้แสดงข้อความต่อไปนี้:

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

หมายเหตุ: อย่าวางนิพจน์ปกติ (หรือตัวสร้าง RegExp) ภายในเงื่อนไข while หรือจะสร้างลูปไม่สิ้นสุดหากมีการแข่งขันเนื่องจากคุณสมบัติ lastIndex ถูกรีเซ็ตในแต่ละการวนซ้ำ ตรวจสอบให้แน่ใจว่ามีการตั้งค่าสถานะโกลบอลหรือการวนซ้ำจะเกิดขึ้นที่นี่เช่นกัน

หากใครบางคน (เช่นฉัน) ต้องการวิธีของ Tomalak ด้วยการรองรับอาร์เรย์ (เช่นเลือกหลายตัว) นี่คือ:

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);

อินพุต ?my=1&my=2&my=things

ผลลัพธ์1,2,things(คืนก่อนหน้านี้เท่านั้น: สิ่งต่าง ๆ )

String.prototype.replace()เพียงแค่ติดกับคำถามที่นำเสนอตามที่ระบุโดยชื่อที่คุณสามารถจริงย้ำกว่าการแข่งขันแต่ละครั้งในสตริงโดยใช้ ตัวอย่างเช่นต่อไปนี้จะทำเช่นนั้นเพื่อรับอาร์เรย์ของคำทั้งหมดตามนิพจน์ทั่วไป:

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"]

หากฉันต้องการได้รับกลุ่มการจับภาพหรือแม้กระทั่งดัชนีของการแข่งขันแต่ละครั้งฉันก็สามารถทำได้เช่นกัน ต่อไปนี้แสดงให้เห็นว่าการแข่งขันแต่ละรายการกลับมาอย่างไรกับการแข่งขันทั้งหมดกลุ่มการจับภาพที่ 1 และดัชนี:

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?");

หลังจากทำงานข้างต้นwordsจะเป็นดังนี้:

[
  {
    "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
  }
]

เพื่อให้ตรงกับเหตุการณ์ที่เกิดขึ้นหลาย ๆ คล้ายกับสิ่งที่มีอยู่ใน PHP กับคุณสามารถใช้ชนิดของความคิดนี้จะทำให้บางสิ่งบางอย่างของคุณเองหรือใช้เช่นpreg_match_all YourJS.matchAll()YourJS มากขึ้นหรือน้อยลงกำหนดฟังก์ชั่นนี้ดังนี้:

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;
}

หากคุณสามารถหลีกเลี่ยงการใช้mapสิ่งนี้เป็นโซลูชั่นสี่บรรทัด:

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

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

console.log(result);

ไม่สวยไม่มีประสิทธิภาพ แต่อย่างน้อยก็กะทัดรัด ;)

การใช้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จาก 2020 ให้ฉันนำ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);
}

ขาออก:

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

ในการดักจับพารามิเตอร์หลายตัวโดยใช้ชื่อเดียวกันฉันได้แก้ไข while loop ในวิธีการของ Tomalak ดังนี้:

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

การป้อนข้อมูล: ?firstname=george&lastname=bush&firstname=bill&lastname=clinton

ผลตอบแทน: {firstname : ["george", "bill"], lastname : ["bush", "clinton"]}

ดี ... ฉันมีปัญหาที่คล้ายกัน ... ฉันต้องการการค้นหาแบบเพิ่ม / ขั้นตอนด้วย RegExp (เช่น: เริ่มค้นหา ... ทำการประมวลผลบางอย่าง ... ทำการค้นหาต่อไปจนกว่าจะถึงนัดสุดท้าย)

หลังจากการค้นหาทางอินเทอร์เน็ตมากมาย ... เช่นเคย (นี่คือการเปลี่ยนนิสัยตอนนี้) ฉันสิ้นสุดใน StackOverflow และพบคำตอบ ...

จะไม่มีการอ้างอิงอะไรและเรื่องที่ต้องพูดถึงคือ " lastIndex" ตอนนี้ฉันเข้าใจแล้วว่าทำไมวัตถุ RegExp จึงใช้lastIndexคุณสมบัติ ""

การแยกเป็นตัวเลือกที่ดีที่สุดสำหรับฉัน:

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

เพื่อหลีกเลี่ยงการ regex นรกคุณสามารถหาคู่แรกของคุณตัดชิ้นอันแล้วพยายามหาตัวต่อไปในซับสตริง ใน C # มีลักษณะเช่นนี้ขอโทษที่ฉันไม่ได้ย้ายไปยัง 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;