如何匹配/捕获元素的outerHTML的开始标记

Question

我试图捕获HTML元素的开始标记。我正在使用element.outerHTML来获取要使用的文本字符串。当开始标记后面有一个新行时，它可以工作：

var div = document.querySelector('div');

console.log(
   div.outerHTML.match(/^<(.*)>/)[1]
);

<div id="awesomeID" class="one two three four">
</div>

然而，当元素是1-liner时，它会断开并捕获到结束标记的末尾：

var div = document.querySelector('div');

console.log(
  div.outerHTML.match(/^<(.*)>/)[1]
);

<div id="awesomeID" class="one two three four"></div>

如何才能捕获开始标记？

Answer 1

使用延迟限定词*?代替贪婪的*。

var div = document.querySelector('div');

console.log(
  div.outerHTML.match(/^<(.*?)>/)[1]
);

<div id="awesomeID" class="one two three four"></div>

贪婪的限定符匹配尽可能多的出现次数，因此它会在最后一次出现时停止。在您的示例中，它会在最后>停止。

虽然延迟限定符尽可能少地匹配，但它会在第一次出现时停止。在您的示例中，它会在第一个>停止。