Javascriptの落とし穴３

正規表現でキャプチャしたい場合はmatchではなくmatchAllかexecを使う

matchはgをつけると複数認識するが、キャプチャを返さない。

ilet optlist = [
  '<select name="country">',
  '<option value="us" selected>アメリカ 合衆国</option>',
  '<option value="fr">ふらんす</option>',
  '<option value="in">インド</option>',
].join("\n");
console.log(optlist);

let regexp2 = new RegExp(
  '<option value="(.+)"\\s?(?: selected)?>(.*)</option>',
  "g"
);

// （要注意）matchはgをつけると複数認識するが、キャプチャを返さない
let hit1 = optlist.match(regexp2);
console.log(hit1);

// muchAllはキャプチャを返す（ES2020）
let hit2 = optlist.matchAll(regexp2);
for (val of hit2) {
  console.log(val[1], val[2]);
}

// execはキャプチャを返す。nullになるまで取り出す
let hit3;
while ((hit3 = regexp2.exec(optlist)) !== null) {
  console.log(hit2[1], hit2[2]);
}

名前付きキャプチャグループ（ES2018）

?でキャプチャし、groups.valueで取り出せる。

let regexp3 = new RegExp(
  '<option value="(?<value>.+)"\\s?(?: selected)?>(?<content>.*)</option>',
  "g"
);

console.log("matchAll------");
let hit22 = optlist.matchAll(regexp3);
for (val of hit22) {
  console.log(val.groups.value, val.groups.content);
}

replaceは１個しか置き換えないので、replaceAllを使う（ES2021）

optlist = optlist.replaceAll(regexp2, "$1, $2");
console.log(optlist);