разделение строки с помощью regEx возвращает последний символ в шаблоне regEx

Question

У меня есть следующий код:

const regEx = /\[~(\d|-|[a-f]){32,36}\]/;
var str = "How [~75e0a072-6464-4e00-8229-a3b6b799a673] to
[~457713c4-a752-4eed-b835-28f7ef74b682] also [~57713c4-a752-4eed-b835-28f7ef74b682] you?";
var res = str.split(regEx);

И Res:

How ,3, to ,2, also ,2, you?

Я хочу иметь:

How ,[~75e0a072-6464-4e00-8229-a3b6b799a673], to ,[~457713c4-a752-4eed-b835-28f7ef74b682], also ,[~57713c4-a752-4eed-b835-28f7ef74b682], you?

Вот кодфрагмент https://jsfiddle.net/3k9g117d/

Answer 1

Проблема известна, группа повторных захватов сохраняет только последнее соответствующее значение в буфере памяти группы.

Группу (\d|-|[a-f]) следует переписать как [-\da-f], ограничивающий квантификатор должен быть применен к нему, а захватывающие скобки должны охватывать весь шаблон,

const regEx = /(\[~[-\da-f]{32,36}\])/;

См. Демонстрационную версию JS:

// find elements
var banner = $("#banner-message")
var button = $("button")

var res = [];
function myFunction() {

  const regEx = /(\[~[-\da-f]{32,36}\])/;

  var str = "How [~75e0a072-6464-4e00-8229-a3b6b799a673] to [~457713c4-a752-4eed-b835-28f7ef74b682] also [~57713c4-a752-4eed-b835-28f7ef74b682] you?";
  var res = str.split(regEx);
  document.getElementById("demo").innerHTML = res;
}

// handle click and add class
button.on("click", myFunction)

document.getElementById("demo").innerHTML = res;

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Test regEx</button>
  <p id="demo"></p>
</div>