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内的所有id和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()函数将调用您传递的函数，参数为匹配结果。第一个参数是整个匹配的子字符串，后续参数是捕获组的值。

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

Answer 2

使用g标记String.match时不会返回捕获组。

所以var ids = codeInput.match(/id="(.*?)"/g);将返回整个匹配项：

["id="codeInput"", "id="test_id1"", "id="test_id2"", "id="submitCode""]

如果您想要捕获组，可以多次调用RegExp.exec或使用@Pointy建议的解决方案。

使用全局模式修改器和前瞻

2 个答案: