javascript文字列変数のようなgetElementsByTagName（）関数はありますか？

Question

getElementsByTagName（）関数を使用して、Webページ内の要素から要素のコレクションを取得できます。

DOM要素の内容ではなく、JavaScriptの文字列変数の内容に同様の機能を使用したいと考えています。

どうすればよいですか？

EDIT

私はその場で要素を作成することによってこれを行うことができます。

var myElement = new Element('div'); 
myElement.innerHTML = "<strong>hello</strong><em>there</em><strong>hot stuff</strong>"; 
var emCollection = myElement.getElementsByTagName('em'); 
alert(emCollection.length); // This gives 1 

しかし、ちょうどいないようだと、Internet Explorerの要素では動作しませんgetElementsByTagNameの（）関数を使用しての便宜のためにその場で要素を作成します。

Answer 1

文字列内のHTMLは特別なものではありません。文字列内のテキストだけです。それが有用であるためには、それをツリーに解析する必要があります。このため、要素を作成してから、getElementsByTagNameを呼び出す必要があります。

Answer 2

function countTags(html, tagName) { 
    var matches = html.match(new RegExp("<" + tagName + "[\\s>]", "ig")); 
    return matches ? matches.length : 0; 
} 

alert(
    countTags(
     "<strong>hello</strong><em>there</em><strong>hot stuff</strong>", 
     "em" 
    ) 
); // 1 

Answer 3

DOMに文字列を注入することは、これまでに示したように、これを行う最も簡単で信頼性の高い方法です。文字列を操作する場合は、と表示される可能性のあるすべてのエスケープシナリオを考慮する必要があります。はとなります。は実際にはタグと似ていません。

たとえば、あなたのマークアップで

<button value="<em>"/> 
<button value="</em>"/> 

を持つことができます - あなたはそれを文字列として扱う場合は、あなたがそこに<em>タグを持っていると思うかもしれないが、実際には、あなたは2個のだけボタンタグを持っています。

innerHTML経由でDOMに注入すると、ブラウザの内蔵HTMLパーサーを利用することになりますが、これは非常に高速です。正規表現を使って同じことをするのは苦痛であり、ブラウザは一般的に文字列内の要素を見つけるためのDOMのような機能を提供しません。

XMLで文字列を解析しようとする可能性のあるもう1つのことは、DOM注入方式よりも面倒で遅いと思われます。

Answer 4

var domParser = new DOMParser(); 
var htmlString = "<strong>hello</strong><em>there</em><strong>hot stuff</strong>"; 
var docElement = domParser.parseFromString(htmlString, "text/html").documentElement; 
var emCollection = docElement.getElementsByTagName("em"); 
for (var i = 0; i < emCollection.length; i++) { 
    console.log(emCollection[i]); 
}