正则表达式：使用正则表达式获取匹配项和剩余字符串

Question

我想使用RegExp构造函数对字符串运行正则表达式，让我同时获得匹配项和剩余字符串。

以上是为了能够实现以下 UI 模式：

正如您在图像中看到的那样，我需要将匹配项与字符串的其余部分分开，以便能够单独应用某些样式或任何其他过程。

/**
 * INPUT 
 * 
 * input: 'las vegas'
 * pattern: 'las'
 *
 *
 * EXPECTED OUTPUT
 * 
 * match: 'las'
 * remaining: 'vegas'
 */

Answer 1

获取匹配项，然后将匹配项替换为字符串中的任何内容，并返回两个结果。

function matchR(str, regex){
    // get the match
    var _match = str.match(regex);
    
    // return the first match index, and the remaining string
    return {match:_match[0], remaining:str.replace(_match, "")};
}

Answer 2

这是一个函数，它将用户输入和要匹配的字符串数组作为参数，并返回一个数组：

 const strings = [ 'Las Cruces', 'Las Vegas', 'Los Altos', 'Los Gatos', ]; function getMatchAndRemaining(input, strings) { let escaped = input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); let regex = new RegExp('^(' + escaped + ')(.*)$', 'i'); return strings.map(str => { return (str.match(regex) || [str, '', str]).slice(1); }); } //tests: ['l', 'las', 'los', 'x'].forEach(input => { let matches = getMatchAndRemaining(input, strings); console.log(input, '=>', matches); });

一些注意事项：

• 您需要在创建正则表达式之前转义用户输入，某些字符具有特殊含义
• 如果没有匹配，则前面部分为空，其余部分包含完整字符串
• 您可以向具有样式或类的函数添加一个附加参数以添加到 before 部分，在这种情况下，您将返回一个字符串而不是 [before, remaining] 的数组