Accueil > Blog > comment s’amuser avec JS, XPATH et faire des bookmarklets

comment s’amuser avec JS, XPATH et faire des bookmarklets

Aujourd’hui, je faisais du télétravail, et comme à mon habitude, j’aime pas bosser enfermé sans personne autour. Du coup, de fil en aiguille je me suis retrouvé “logé” chez des amis. Et en discutant boulot, on a dévié sur une discussion sur le Xpath, puis sur le JS, puis les bookmarklets ….. et 2 minutes plus tard, on se lançait dans la création d’un bookmarklet, juste comme ça, pour le délire, le défit et pour l’apprentissage, encore et encore.

JS et bookmarklets

Avant d’aller plus loin, il faut vous partir d’un postulat simple : ” si tu peux le faire en JS, tu peux en faire un bookmarklet”.

vous me direz : oui, mais parfois on a besoin de Jquery, ou de JS externes, etc. Pas de soucis, ça passera quand même. La seule contrainte du bookmarklet, c’est de contenir sur une seule ligne, d’encoder les espaces et autres joyeusetés. Ici aussi, ne vous inquiétez pas. Il y a ce qu’il faut ici : http://mrcoles.com/bookmarklet/

Il vous suffit de coller votre code JS, il se chargera de faire le reste, il en existe surement d’autres, mais celui ci me convient parfaitement pour ma part 😉

Et le Xpath là dedans ?

on va la faire simple :

document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );

Javascript intègre nativement tout ce qu’il faut pour parser des documents XML et par extension HTML via l’evaluation de XPATH.

xpathExpression
Une chaîne contenant l’expression XPath à évaluer.

contextNode
Un nœud du document pour lequel l’expression xpathExpression doit être évaluée, ainsi que l’ensemble de ses descendants. Le nœud document est le plus couramment utilisé.

namespaceResolver
Une fonction à laquelle sera passé tout préfixe d’espace de nommage contenu dans l’expression xpathExpression et qui renvoie une chaîne représentant l’URI de l’espace de nommage associé à ce préfixe.
On se prend pas la tête, pour du HTML, mettez “null” directement, vous posez pas de question pour le moment.

resultType
Une constante qui définit le type de résultat à renvoyer comme résultat de l’évaluation.

  • XPathResult.NUMBER_TYPE
  • XPathResult.STRING_TYPE
  • XPathResult.BOOLEAN_TYPE
  • XPathResult.ANY_TYPE

Vous ne voulez pas être ennuyé, mettez un “XPathResult.ANY_TYPE”.

En fait, j’ai trop la flemme vu l’heure de me réexpliquer tout (oui ce blog me sert aussi de marque pages personnelles ^^) et de vous l’expliquer, vous voulez en savoir plus, c’est par là : https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_l%27utilisation_de_XPath_avec_JavaScript :p

UN petit prompt dans le JS histoire de vous laisser renseigner le XPath que vous voulez parser, et pour finir, une fonction de sauvegarde rapidos (oui, on l’a un peu faite à l’arrache aussi 😀 ).

Le bookmarklet tout fait

et voici le code complet :

javascript: (function() {
	for (var x = "//body"; x;) {
		var r;
		try {
			r = document.evaluate(x, document, null, 0, null);
			switch (r.resultType) {
				case 1:
					r = r.numberValue;
				break;
				case 2:
					r = r.stringValue;
				break;
				case 3:
					r = r.booleanValue;
				break;
				case 4:
					var n = r,
					r = [],e;
					while (e = n.iterateNext()) r.push(e.nodeType == 2 ? e.value : e.nodeType == 3 ? e.textContent : e);
					r = r.join("\r\n");
				break;
			}
		} catch (ex) {
			r = ex.message;
		}
		x = prompt(r, x);
	}
	document.location = "data:text/csv;base64," + btoa(r);
	void(0)
})()

et le bookmarklet tout cuit à glisser dans votre barre de favoris : JS XPTHer

Quand vous cliquerez sur le bookmarklet, la première chose à faire, c’est entrer la Xpath, appuyez sur “OK”, de là il evaluera la XPATH sur la page courante, vous verrez apparaitre le résultat du scrap au dessus du champ de la XPATH. Si le résultat vous convient, cliquez sur “annuler” il vous proposera d’enregistrer le résultat dans un fichier. Vous pouvez ouvrir le fichier avec Notepad pour admirer le résultat 😉

Si vous voulez tester, voici la X-path pour relever tous les “H2” de cet article : //div[@class=’entry-content’]/h2/text()

Merci à Doudoumoi et LillyPeachyKeen de m’avoir accueilli et payé le café et la connexion internet :-D, c’est en discutant ensemble que l’idée nous est venue quand je devais partir, et du coup, on s’y est mis et on a pas laché jusqu’à trouver et on s’est marré.

Sauvez un dauphin albinos, partagez !!!

A propos DjibouTeaM

Check Also

Barbecue SEO Toulouse

Ce vendredi 09 juin, on se retrouve entre gens du WEB pour se faire un …