javascript - Javascriptでタグを検索し、innerHTMLを取得します

Question

それはおそらく本当に単純なことですが、私はただ学んでいます。

3つのブロッククォートタグが付いたページがあり、特定の文字列を含むページのinnerHTMLを取得する必要があります。文字列を検索/照合して、照合された結果を含むタグのinnerHTMLを取得する方法がわかりません。

どんな助けでもいただければ幸いです！

Answer 1

var searchString = 'The stuff in innerHTML';
var elements = document.getElementsByTagName('blockquote')
for (var i = 0; i < elements.length; i++) {
     if (elements[i].innerHTML.indexOf(searchString) !== -1) {
         alert('Match');
         break;
     }
}

:)

ところで、 Prorotype JS（jQuery btwよりもはるかに優れています）を使用する場合は、はるかに優れた方法があります。

var el = $$('blockquote').find(function(el) {
    return el.innerHTML.indexOf('The string you are looking for.') !== -1;
});

もちろん、正規表現を使用して文字列を検索することもできます。これは、より便利な場合があります（el.match（）を使用します）。

Answer 2

ページ上のすべてを検索する必要がある場合は、次のことを<blockquote>試してください。

function findBlockquoteContainingHtml(matchString) {
    var blockquoteElements = document.getElementsByTagName('BLOCKQUOTE');
    var i;
    for (i = 0; i < blockquoteElements.length; i++) {
        if (blockquoteElements[i].innerHTML.indexOf(matchString) >= 0) {
            return blockquoteElements[i].innerHTML;
        }
    }
    return null;
}

Answer 3

ブロッククォート要素にIDを割り当てると、次のようにinnerHTMLを取得できます。

HTML：

<blockquote id="bq1">Foo</blockquote>

JS：

var quote1 = document.getElementById('bq1').innerHTML;

Answer 4

タグ内のテキストの検索には注意innerHTMLが必要です。属性やタグ内のテキストも検索される可能性があるためです。

blockquote次を使用してすべての要素を見つけることができます。

var elems = document.getElementsByTagName("blockquote")

その後、それらを調べることができますが、innerHTML代わりにtextContent/を調べることをお勧めしますinnerText（残念ながら、これはブラウザー全体で標準化されていないようです）：

for (i in elems) {
  var text = elems[i].textContent || elems[i].innerText;
  if (text.match(/foo/)) {
    alert(elems[i].innerHTML);
  }
}