Или чередование Regex возвращает больше результатов, чем следовало бы?

Question

Код изменен с https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_regexp_xy.

<p>Click the button to do a global search for any of the specified alternatives (red|green).</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
  function myFunction() {
    var str = "re, green, red, green, gren, gr, blue, yellow";
    var patt1 = /(blue|red)/;
    var result = str.match(patt1);
    document.getElementById("demo").innerHTML = result;
  }
</script>

Результат red,red. Тем не менее, есть только один red. Почему возвращается два?

Answer 1

Поскольку вы используете группы в регулярном выражении, match retunrns соответствует строке и группе (поэтому массив с двумя одинаковыми элементами). Вместо этого используйте /blue|red/g (g означает, что match продолжит поиск после первого совпадения с поиском)

function myFunction() {
  var str = "re, green, red, green, gren, gr, blue, yellow";
  var patt1 = /blue|red/g;
  var result = str.match(patt1);
  demo.innerHTML = result;
}

<p>Click the button to do a global search for any of the specified alternatives (red|green).</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

Answer 2

Не следует использовать Capturing Group , которая работает на альтернативах.Удалить () из регулярного выражения.

Изменить

var patt1 = /(blue|red)/;

на

var patt1 = /blue|red/;

<p>Click the button to do a global search for any of the specified alternatives (red|green).</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
  function myFunction() {
    var str = "re, green, red, green, gren, gr, blue, yellow";
    var patt1 = /blue|red/;
    var result = str.match(patt1);
    document.getElementById("demo").innerHTML = result;
  }
</script>