要素のouterHTMLの開始タグだけを一致/捕捉する方法

Question

HTML要素の開始タグをキャプチャしようとしています。私は動作するテキストの文字列を取得するためにelement.outerHTMLを使用しています。要素が1-ライナーがある

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

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

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

しかし

、それが壊れるとクロージングの最後にすべての方法をキャプチャ：そこ開始タグの後に改行があるとき、それは動作しますタグ：

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>

貪欲な修飾子は、できるだけ多くの繰り返しに一致し、それは最後の可能な発生で停止します。あなたの例では、最後に>に停止します。

lazy修飾子は、できるだけ少数のオカレンスと一致しますが、最初の発生時に停止します。あなたの例では、それは最初の>で停止します。