Recherche Javascript pour le tag et obtenir c'est innerHTML

Question

C'est probablement quelque chose de très simple, mais je suis en train d'apprendre.

Il y a une page avec 3 balises blockquote, et je devrais obtenir le innerHTML de celui contenant une certaine chaîne. Je ne sais pas comment rechercher/faire correspondre une chaîne et obtenir le innerHTML de la balise contenant le résultat correspondant.

Toute aide serait appréciée!

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; 
    } 
} 

:)

Btw il y aurait beaucoup plus belle méthode si vous souhaitez utiliser Prorotype JS (ce qui est beaucoup mieux que jQuery BTW):

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

Vous pouvez bien sûr aussi utiliser des expressions régulières pour trouver la chaîne, ce qui pourrait être plus utile (utilisation el.match () pour ça).

Answer 2

Rattacher un attribut id aux éléments blockquote alors vous pouvez obtenir le innerHTML comme ceci:

HTML:

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

JS:

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

Answer 3

Si vous devez rechercher dans tous les <blockquote> sur la page, essayez ceci:

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 4

Soyez prudent en utilisant innerHTML pour rechercher du texte dans une balise, car cela peut aussi rechercher du texte dans les attributs ou des balises comme bien.

Vous pouvez trouver tous les éléments en utilisant:

var elems = document.getElementsByTagName("blockquote") 

Vous pouvez alors regarder à travers leur innerHTML, mais je vous recommande plutôt de chercher à travers leur textContent/innerText (malheureusement, ce n'est pas normalisée dans le navigateur, il semble):

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