要素の正確なhtmlを指定してDOM内の要素を検索

Question

htmlページに任意の方法で表示される13桁の数値コード（ncodeと呼ぶ）を効率的に検索する必要がありました。 <p>ncode</p>、または<input type="hidden" value="ncode">または<span content="ncode"></span>となります。

私は私が必要とするHTMLフラグメントを検索し、特定の場合には、それは

<span itemprop="gtin13" content="0885913103914"></span> 

ことをやった、私は実際のDOM要素を見つけるために、jQueryのを使用して簡単だろうと思ったが、私が返す正規表現を作成しました動作するものを見つけることができないようです。私は$（body）.filter（ "：contains（）"）やさまざまな類似のものを試しました。

ですから、既知の文字列に一致するHTMLの要素をDOM内に配置するにはどうすればよいでしょうか？

できない場合は、見つかったhtml文字列をさまざまなプロパティで解析し、それらのプロパティを使用して要素を選択する必要があります。要素を直接選択してDOMで照会して操作できる方法があるようです。

Answer 1

のhtml-に表すノードのクラスを探す

HTMLから見つける表すノードの名前を検索し、この単純なアプローチ

• をお試しください-find
• 上記の2つの情報を持つセレクタを用意して、それを実行します。

デモ

var htmlToFind = '<span class="clas31" attribute1="4">fdgdfg</span>'; 
 

 
var nodeName = $(htmlToFind)[0].nodeName; 
 
var classList = [].slice.call($(htmlToFind)[0].classList).join("."); 
 

 
var isFound = $(nodeName + "." + classList).length > 0 
 

 
console.log(isFound);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <span class="class1" attribute1="2">345345</span> 
 
    <span class="class2" attribute1="2"><a>a34rrt5345</a></span> 
 
    <span class="clas31" attribute1="4">fdgdfg</span> 
 
    <div asd="sd">rdfgdfg</div> 
 
</div>

あなたはHTMLから見つけるだけでなくの他の属性をチェックすることにより、これをさらに最適化することができます。

ノード名やクラスによって返されたノードの数が1以上ある場合、

あなたが求めているものを行うことができますが、私はお勧め

var htmlToFind = '<span class="clas31" attribute1="4">fdgdfg</span>'; 
 

 
var nodeName = $(htmlToFind)[0].nodeName; 
 
var classList = [].slice.call($(htmlToFind)[0].classList).join("."); 
 

 
var length = $(nodeName + "." + classList).length 
 

 
console.log("total matches by classnames and node name " + length); 
 
var exactMatches = []; 
 
$(nodeName + "." + classList).each(function(){ 
 
    if (this.outerHTML == htmlToFind) 
 
    { 
 
     exactMatches.push(this) 
 
    } 
 
}); 
 
console.log("exactMatches" , exactMatches )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <span class="class1" attribute1="2">345345</span> 
 
    <span class="class2" attribute1="2"><a>a34rrt5345</a></span> 
 
    <span class="clas31" attribute1="4">fdgdfg</span> 
 
    <span class="clas31" attribute1="4">fdg2dfg</span> 
 
    <div asd="sd">rdfgdfg</div> 
 
</div>

Answer 2

として、さらにそれらをフィルタリングします純粋にパフォーマンス上の理由から、それをしないでください。ドキュメント本体のすべての要素を取得し、定義されたロジック（特定の要素をどのように識別したいかによって決まります）で解析すると、一致する要素のみのコレクションを取得できます。

この例は、あなたが他の基準に合うようにフィルタ機能を調整する必要があるだろう...どこかの要素で

// this returns the element(s) that contain the given text 
 
var elements = $("body span").filter(function() { 
 
\t return this.outerHTML.match("0885913103914"); 
 
}).toArray(); 
 

 
elements.forEach(function(el) { console.log(el.innerText); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span itemprop="gtin13" content="0885913103914">Span with correct content attribute.</span><br /> 
 
<span itemprop="gtin13" content="0885913103915">Span with incorrect content attribute.</span><br /> 
 
<span itemprop="gtin13" content="0885913103914">Span with correct content attribute.</span><br /> 
 
<span itemprop="gtin13" content="0885913103915">Span with 0885913103914 inside the contents.</span><br />

を特定の値を持つ要素を見つけることを示しています。基本的に、trueを返すと、要素は出力に含まれます。

これを元のregexソリューションで効果的に実行できるのであれば、その代わりにお勧めします。