JavaScript 正则表达式 : capturing optional groups while having a strict matching

Question

我试图从用户输入中提取一些数据，这些数据应遵循以下格式:1d 5h 30m，这意味着用户输入的时间量为 1 天 5 小时 30 分钟。

我正在尝试提取输入的每个部分的值。但是，每个组都是可选的，这意味着 2h 20m 是有效输入。

我试图在输入中保持灵 active (从某种意义上说，并非所有部分都需要输入)，但同时我不看我的正则表达式来匹配一些随机输入，例如 asdfasdf20m。应拒绝此一项(不匹配)。

因此，首先我要删除用户可能使用过的任何分隔符(他们的输入可能类似于 4h, 10m ，没关系):

input = input.replace(/[\s.,;_|#-]+/g, '');

然后我捕获每个部分，我使用 ? 将其指示为可选:

var match = /^((\d+)d)?((\d+)h)?((\d+)m)?$/.exec(input);

当我只想要实际值时，捕获包括字母在内的整个组有点困惑，但我不能说簇是可选的而不用括号括起来，对吗？

然后，当捕获空组时，match 中的值是undefined。是否有任何函数可以将 undefined 值默认为特定值？例如，0 在这里会很方便。

示例，其中输入为“4d, 20h, 55m”，匹配结果为:

["4d20h55m", "4d", "4", "20h", "20", "55m", "55", index: 0, input: "4d20h55m"]

我的主要问题是:

• 如何将某个组指示为可选但避免捕获它？

• 如何处理可能匹配的输入，例如 abcdefg6d8m？

• 如何处理更改的订单？例如，用户可以输入20m 10h。

当我问“如何处理 x”时，我的意思是我希望能够拒绝这些匹配。

Answer 1

作为变体:

HTML:

<input type="text">
<button>Check</button>
<div id="res"></div>

JS:

var r = [];
document.querySelector('button').addEventListener('click', function(){
  var v = document.querySelector('input').value;
  v.replace(/(\d+d)|(\d+h)|(\d+m)/ig, replacer);
  document.querySelector('#res').innerText = r;
}, false);

function trim(s, mask) {
    while (~mask.indexOf(s[0])) {
        s = s.slice(1);
    }
    while (~mask.indexOf(s[s.length - 1])) {
        s = s.slice(0, -1);
    }
    return s;
}

function replacer(str){
  if(/d$/gi.test(str)){
    r[0] = str;
  }
  else if(/h$/gi.test(str)){
    r[1] = str;
  }
  else if(/m$/gi.test(str)){
    r[2] = str;
  }
  return trim(r.join(', '), ',');
}

参见here .