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

时间:2016-07-17 04:51:43

标签: javascript regex

我试图捕获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>

如何才能捕获开始标记?

1 个答案:

答案 0 :(得分:2)

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

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

console.log(
  div.outerHTML.match(/^<(.*?)>/)[1]
);
<div id="awesomeID" class="one two three four"></div>

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

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