使用正则表达式拆分的字符串返回正则表达式模式中的最后一个字符答案

【问题标题】：string split with a regEx returns last character in regEx pattern使用正则表达式拆分的字符串返回正则表达式模式中的最后一个字符
【发布时间】：2018-11-09 08:46:58
【问题描述】：

我有以下代码：

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

而资源是：

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?

这是一个代码sn-p https://jsfiddle.net/3k9g117d/

【问题讨论】：

使用/(\[~[-\da-f]{32,36}\])/
@WiktorStribiżew 不，不行，已经试过了，结果中还有 3、2、2 jsfiddle.net/7z1yxLw5
我收到How ,[~75e0a072-6464-4e00-8229-a3b6b799a673], to ,[~457713c4-a752-4eed-b835-28f7ef74b682], also ,[~57713c4-a752-4eed-b835-28f7ef74b682], you?
好的，抱歉，我明白了，与我修改的模式不同

标签： regex string split

【解决方案1】：

问题是一个已知问题，repeated capturing group 仅将最后匹配的值保留在组内存缓冲区中。

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

【讨论】：