javascript - 使用全局模式修饰符和前瞻

Question

我正在努力更好地理解正则表达式，所以即使有不同的、更好的解决方案(确实存在)，我也不在乎。我想用正则表达式解决它。

特别是当我运行以下 js/regex 时:

$('#submitCode').click(function() {
    var codeInput = $('#codeInput').val();
    var ids = codeInput.match(/id="(.*?)"/);
    var classes = codeInput.match(/class="(.*?)"/);
    var output = classes[1].split(" ");
    output.push( ids[1] );
    console.log(output);
    });

在下面的 html 中，目标是返回 textarea#codeInput 中的所有 ids 和 css 类:

<textarea id="codeInput">
 <div id="test_id1" class="class1 class2">
  <div id="test_id2" class="class3 class4">test</div>
 </div>
</textarea>
<button id="submitCode">submit</button>

它在第一场比赛后停止，给我以​​下输出:

["class1", "class2", "test_id1"] 

经过一些研究，看起来全局修饰符是我想要的，但是当我这样添加它时:

    var ids = codeInput.match(/id="(.*?)"/g);
    var classes = codeInput.match(/class="(.*?)"/g);

这是输出:

["class="class3", "class4"", "id="test_id2""] 

当我想要的是:

["class1", "class2", "class3", "class4", "test_id1", "test_id2"] 

Here is the jsfiddle .

在我的研究中，我也开始阅读更多关于前瞻的内容，但我没有在我的正则表达式中看到 (?=) 模式，所以奖励积分给任何可以启发我的人如果不是前瞻性的，在我的陈述中实际上正在发生。

谢谢!

Answer 1

我认为在这种情况下，我会利用使用函数对正则表达式匹配结果进行操作的能力:

var output = [];
codeInput.replace(/(?:class|id)="(.*?)"/g, function(_, values) {
  values.split(" ").forEach(function(s) { output.push(s); });
});

.replace() 函数将调用您传递给它的函数，参数为匹配结果。第一个参数是整个匹配的子串，后面的参数是捕获组的值。

请注意，没有进行实际的替换；代码只是利用了这种行为。