Obtenir du texte entre deux images

Existe-t-il un moyen plus simple d'attraper le texte entre deux images qui n'ont pas un même élément parent? Je crée un script utilisateur pour une page Web. Comme:

<div id="content"></div> <div style="text-align:center"><img src="" alt=""></div> <a>some text</a> <img src="" alt=""> <div style="text-align:left">more text</div> </div>

Comment obtenir le texte entre la 1ère image et la 2ème image du contenu div. Je ne connais pas exactement la structure correcte car peut-être que le texte et les images pourraient être à l'intérieur de div ou de nœuds. Je préfère ne pas utiliser de bibliothèques

Vous voulez essentiellement gérer les balises <img> comme des citations sur le texte que vous souhaitez extraire.

La façon la plus simple de le faire est de simplement remplacer la <img> par quelque chose qui n'est probablement pas répété dans le texte, et utiliser ce caractère comme délimiteur. Je vais vous montrer comment utiliser jQuery. Si vous avez besoin de cela dans JS pur que vous devrez convertir cela.

D'abord, faites une copie du HTML.

 var html = $('<div>').append($("#content").html());

Ensuite, remplacez toutes les balises <img> par un caractère spécial (ou un autre jeton que vous connaissez est unique).

 html.find("img").replaceWith("<div>~</div>");

Une fois que vous l'avez fait, vous pouvez simplement faire correspondre le texte entre ces délimiteurs comme celui-ci.

 var str = html.text(); var rx = /~([^~]+)~/g; var match = rx.exec(str);

Pour trouver toutes les correspondances, il suffit de répéter.

 while(match != null) { alert(match[1]); match = rx.exec(str); }

Il est possible de faire de même avec une expression unique comme @img@ au lieu d'un seul personnage, mais un seul personnage est beaucoup plus facile.

Voici un violon de travail.

http://jsfiddle.net/thinkingmedia/etx1z6ov/2/

Améliorer la réponse de Mathew avec javascript pur:

 var html = document.getElementById('content').cloneNode(true); var imgs = html.getElementsByTagName('img'); for (i = 0; i < imgs.length; i++) { var textSep = document.createTextNode('@img@'); imgs[i].parentNode.insertBefore(textSep, imgs[i]); } var texts = html.textContent; texts = texts.split('@img@');

Cette réponse n'est pas la meilleure, je l'ai mis ici juste pour info

1 – Descendre

2 – Aller au prochain frère ou sœur

3 – S'il n'y en a pas, montez et le prochain frère ou sœur.

Répéter.

C'est comme marcher dans une vallée comme celle-ci: D

 \ div#content / \txt/\ div /\ div /\ div /\txt/\ div / \ a / \txt/ \ a / \img2/ \img1/ \txt/\txt/

Eh bien, après plusieurs heures, j'ai découvert et fait l'algorithme:

 function textAfterElem (el, nextEl) { var txt = ""; while(true){ //go down while(el.firstChild) { el = el.firstChild; if (el == nextEl) {return txt;} } txt += el.textContent; // extract //go next if (el.nextSibling) { el = el.nextSibling; if (el == nextEl) {return txt;} }else{ //go up while(!el.nextSibling) { el = el.parentNode; if (el == document.body) {return txt;} // for security } if (el.nextSibling) { el = el.nextSibling; // go next if (el == nextEl) {return txt;} }else{ return txt; // for security } } } return txt; }

Et il pourrait être utilisé non seulement avec des images mais n'importe quel élément

Une simple effacement et fractionnement fonctionne aussi:

 html.replace(/<(?!img\b)[^>]*>/g, '').split(/<img\b[^>]*>/)

Avec votre exemple, le résultat est:

 ["↵ ", "↵ some text↵ ", "↵ more text↵"]