DOM : saisir le nombre de résultats dans google scholar

**thibaud74** · 21/07/2010, 14h58

Bonjour !

Je souhaite accéder dans le DOM au nombre de résultats dans google scholar, mais sans id, je trouve cela un peu compliqué !

D'après mon examen du DOM, je devrais obtenir ce nombre lorsque j'injecte le code suivant dans la barre d'adresse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
javascript:
alert(typeof document.getElementById('scife_hdr').parentNode.lastChild.firstChild.lastChild.lastChild.firstChild[2].nodeValue );

Le typeof me permet de vérifier si ce que j'obtiens est correct. Or, à partir du moment où j'ajoute [2].nodeValue, je n'obtiens plus Object comme résultat mais rien du tout... où est l'erreur ?

Voici une image de la structure du noeud que j'essaie d'atteindre :

En grisé, la valeur à atteindre.

Si vous préférez, voici le code de la partie FORM concernée, mais je ne la trouve pas bien claire. Dans cet exemple, la valeur recherchée est "30,100".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form xmlns="http://www.w3.org/1999/xhtml" action="/scholar" method="GET" name="gs"><div id="scife_hdr"><div width="189" style="float: left; margin: 0pt;"><a target="_top" href="/schhp?hl=en&amp;as_sdt=2000"><img border="0" width="189" vspace="2" height="40" alt="Scholar Home" src="/intl/en/images/scholar_logo_md_2009.gif" /></a></div><div style="margin-left: 189px;"><div style="margin-left: 10px;"><table cellspacing="0" cellpadding="0" border="0" style="margin: 1px 3px 1px 0px;"><tbody><tr><td nowrap="nowrap"><input type="hidden" value="en" name="hl" /><input type="text" value="compiègne" maxlength="2048" size="41" name="q" /><font size="-1"> <input type="submit" value="Search" name="btnG" /></font></td><td>**</td><td valign="top" nowrap="nowrap"><font size="-2"><a href="/advanced_scholar_search?q=compi%C3%A8gne&amp;hl=en&amp;as_sdt=2000">Advanced Scholar Search</a><br /><a href="/scholar_preferences?q=compi%C3%A8gne&amp;hl=en&amp;as_sdt=2000">Scholar Preferences</a><br /></font></td></tr></tbody></table></div></div></div><table cellspacing="0" cellpadding="0" border="0" bgcolor="#dcf6db" width="100%"><tbody><tr><td bgcolor="#008000" colspan="2"><img width="1" height="1" alt="" /></td></tr><tr><td bgcolor="#dcf6db" nowrap="nowrap"><font size="+1"> <b>Scholar</b></font>* <select onchange="document.gs.submit()" name="as_sdt"><option selected="selected" value="2000">Articles and patents</option><option value="2001">**Articles excluding patents</option><option value="2002">Legal opinions and journals</option><option value="2003">**Federal cases</option><option value="2004">**California cases</option><option value="2000!">  Advanced search…</option></select> <select onchange="document.gs.submit()" name="as_ylo"><option selected="selected" value="">anytime</option><option value="2010">since 2010</option><option value="2009">since 2009</option><option value="2008">since 2008</option><option value="2007">since 2007</option><option value="2006">since 2006</option><option value="2005">since 2005</option><option value="2004">since 2004</option><option value="2003">since 2003</option><option value="2002">since 2002</option><option value="2001">since 2001</option><option value="2000">since 2000</option><option value="1999">since 1999</option><option value="1998">since 1998</option><option value="1997">since 1997</option><option value="1996">since 1996</option><option value="1995">since 1995</option><option value="1994">since 1994</option><option value="1993">since 1993</option><option value="1992">since 1992</option><option value="1991">since 1991</option></select> <select onchange="document.gs.submit()" name="as_vis"><option selected="selected" value="0">include citations</option><option value="1">at least summaries</option></select>**<a href="/scholar_alerts?view_op=create_alert_options&amp;hl=en&amp;alert_query=intitle:compi%C3%A8gne&amp;alert_params=hl%3Den%26as_sdt%3D2000"><img border="0" align="texttop" width="22" height="19" title="Create email alert" src="/scholar/scholar_envelope.png" /></a>*<font size="-1"><a href="/scholar_alerts?view_op=create_alert_options&amp;hl=en&amp;alert_query=intitle:compi%C3%A8gne&amp;alert_params=hl%3Den%26as_sdt%3D2000">Create email alert</a></font></td><td bgcolor="#dcf6db" align="right" nowrap="nowrap"><font size="-1">Results <b>1</b> - <b>10</b> of about <b>30,100</b>.   (<b>0.11</b> sec)*</font></td></tr></tbody></table></form>

Merci de l'aide,
Thibaud.

**SpaceFrog** · 21/07/2010, 17h39

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

firstChild[2]

firstChild n'a jamais retourné une collection

**Watilin** · 21/07/2010, 18h40

Envoyé par thibaud74

Bonjour !

[…] lorsque j'injecte le code suivant dans la barre d'adresse : […]

Argh, douleur… Si j’étais à ta place ça ferait bien longtemps que je serais chauve à force de m’arracher les cheveux. Enfin, voyons le bon côté des choses : ça enseigne la patience

Tu vas faire un bond lunaire en productivité si tu te trouves un outil de développement.

sous Firefox : l’extension Firebug
sous IE8 : déjà installé (F12)
sous Google Chrome, Opera et Safari/windows : déjà installé (Ctrl+Maj+I)

Ensuite, j’ai envie de dire : la vache, ce problème est vraiment pénible, effectivement y’a pas un seul id ni une seule classe pour nous aider…

Le but c’est d’avoir une expression de sélection qui dépende le moins possible de la structure de la page, afin d’avoir un script qui tolère un tant soit peu les mises à jour de Google… Actuellement, si Google rajoute un élément après le <table> du <div id="scife_hdr">, ça va foirer au niveau du premier parentNode…

❧

Y’a quand même un peu plus simple que ce que tu as trouvé. Par exemple on a les attributs nextSibling et previousSibling pour naviguer entre des nœuds voisins. Le problème c’est les nœuds #text…

Sur des projets légers, sans framework, les fonctions dans ce genre sont utiles :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/*
 * retourne le premier élément suivant current,
 * correspondant à expected si demandé ;
 * renvoie null si pas trouvé
 * parametres:
 * 	current: nœud DOM
 * 	expected: (optionnel) string
 */
function nextElement( current, expected ) {
	var next = current.nextSibling;
	while (!(
		next === null || (
			next.nodeType == 1 && (
				!expected || next.nodeName == expected.toUpperCase()
			)
		)
	)) {
		next = next.nextSibling;
	};
	return next;
};
 
/*
 * tout pareil mais dans l'autre sens
 */
function previousElement( current, expected ) {
	var previous = current.previousSibling;
	while (!(
		previous === null || (
			previous.nodeType == 1 && (
				!expected || previous.nodeName == expected.toUpperCase()
			)
		)
	)) {
		previous = previous.previousSibling;
	};
	return previous;
};
 
/*
 * pareil avec les enfants, en partant du début
 */
function firstElement( current, expected ) {
	var child = current.firstChild;
	if (!(
		child === null || (
			child.nodeType == 1 && (
				!expected || child.nodeName == expected.toUpperCase()
			)
		)
	)) {
		child = nextElement(child, expected);
	};
	return child;
};
 
/*
 * pareil avec les enfants, en partant de la fin
 */
function lastElement( current, expected ) {
	var child = current.lastChild;
	if (!(
		child === null || (
			child.nodeType == 1 && (
				!expected || child.nodeName == expected.toUpperCase()
			)
		)
	)) {
		child = previousElement(child, expected);
	};
	return child;
};

(Les toUpperCase() c’est parce que les nodeName sont en majuscules dans le DOM.)

En l’occurence, ceci permettrait de s’assurer un peu mieux de saisir le bon tableau au départ :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

var bonTableau = nextElement(document.getElementById('scife_hdr'), 'table');

Enfin je te sors ça pour info mais, pour le reste, ça me fait vraiment ch*** de fouiller dans le DOM sans aucune garantie alors je sors l’arme lourde : la Regexp !

Et puis sans aucune subtilité je vais passer cette regexp sur le innerHTML de notre tableau.
Voici l’animal :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

/environ\s+<b>([\d&nbsp;]+)<\/b>/

Le principe c’est de repérer la balise <b> qui suit le mot « environ ». On se méfie des espaces (\s+), il pourrait y en avoir plusieurs dans le code source…
Ensuite, la balise ne contient en principe que des nombres (\d) et des espaces insécables ( ).
Enfin, les parenthèses permettent de capturer le contenu intéressant.

La méthode match() des strings renvoie un tableau quand on l’utilise avec une regexp. Le premier élément contient la correspondance totale, et les suivants sont les parties capturées.
Exemple :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
"aabbcc".match( /b*(c*)/ )
// => ["bbcc", "cc"]

Là je pense que tu commences à comprendre…

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var capture = bonTableau.innerHTML.match( /environ\s+<b>([\d&nbsp;]+)<\/b>/ )[1];
// on a un truc du style "1&nbsp;200$nbsp;000"
capture = capture.replace( /&nbsp;/g, '' );
// conversion finale !
var results = Number(capture);

Pour être totalement indépendant on peut carrément parser le innerHTML du body (ça sera assez rapide car il n’a que le haut de la page à analyser).
Ça pourrait même tenir en une ligne ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var results = Number(document.body.innerHTML.match(/environ\s+<b>([\d&nbsp;]+)<\/b>/)[1].replace(/&nbsp;/g, ''));

Valà, bon si ton objectif c’est d’utiliser le DOM je suis HS, mais dans un cas retors comme celui-ci…

**thibaud74** · 22/07/2010, 09h55

Merci @Watilin pour cet excellent exposé très pédagogique ! J'avais installé firebug, mais je n'avais pris le temps de comprendre son utilisation, donc j'ai activé la console, effectivement c'est pratique !
Ensuite, j'ai un souci avec les deux méthodes que tu présentes, à cause de l'internationalisation. En effet, une recherche en japonais, non seulement rend inutilisable le mot "environ" dans la regex, mais inverse aussi l'ordre des balises ! Donc il faut utiliser une regex de toute façon, même en utilisant le DOM...

Voici le code en japonais avec 1 résultat sur 1 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td bgcolor=#dcf6db align=right nowrap><font size=-1><b>1</b>件中<b>1</b> - <b>1</b>件目 （<b>0.07</b> 秒）&nbsp;</font></td>

@SpaceFrog: oui il faut que je revois mes fondamentaux.

**thibaud74** · 22/07/2010, 12h14

J'y suis ! J'ai utilisé les fonctions indiquées par Watilin auxquelles j'ai ajouté une méthode qui permet de trouver une valeur maximale dans un tableau. Je récupère le nœud table, puis ce qui est dans la balise <font size=-1>. Là-dedans je récupère les nombres et je prend le plus grand, puisqu'on a une phrase du style pages 1 à 10 sur 495 document en 3 secondes.
Peut-être y a-t-il des améliorations à faire ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/*
 * retourne le premier élément suivant current,
 * correspondant à expected si demandé ;
 * renvoie null si pas trouvé
 * parametres:
 * 	current: nœud DOM
 * 	expected: (optionnel) string
 */
function nextElement( current, expected ) {
	var next = current.nextSibling;
	while (!(
		next === null || (
			next.nodeType == 1 && (
				!expected || next.nodeName == expected.toUpperCase()
			)
		)
	)) {
		next = next.nextSibling;
	};
	return next;
};
 
/*
 * tout pareil mais dans l'autre sens
 */
function previousElement( current, expected ) {
	var previous = current.previousSibling;
	while (!(
		previous === null || (
			previous.nodeType == 1 && (
				!expected || previous.nodeName == expected.toUpperCase()
			)
		)
	)) {
		previous = previous.previousSibling;
	};
	return previous;
};
 
/*
 * pareil avec les enfants, en partant du début
 */
function firstElement( current, expected ) {
	var child = current.firstChild;
	if (!(
		child === null || (
			child.nodeType == 1 && (
				!expected || child.nodeName == expected.toUpperCase()
			)
		)
	)) {
		child = nextElement(child, expected);
	};
	return child;
};
 
/*
 * pareil avec les enfants, en partant de la fin
 */
function lastElement( current, expected ) {
	var child = current.lastChild;
	if (!(
		child === null || (
			child.nodeType == 1 && (
				!expected || child.nodeName == expected.toUpperCase()
			)
		)
	)) {
		child = previousElement(child, expected);
	};
	return child;
};
 
Array.prototype.max = function() {
	var max = this[0];
	var len = this.length;
	for (var i = 1; i < len; i++) if (this[i] > max) max = this[i];
	return max;
}
 
 
var bonTableau = nextElement(document.getElementById('scife_hdr'), 'table');
// This script get : the table node, the "font=-1" node, delete the float number, make a table with numbers only, max of them
var capture = bonTableau.innerHTML.replace(/^.*<font size=\"\-1\">/,'').replace(/<\/font>.*$/,'').replace(/[0-9]+\.[0-9]+/,'').replace(',','').match(/(\d[,\d]*)/g);
// match( /<b>([\d&nbsp;]+)<\/b>/g )[1];
alert(capture + "\nMAX=" + capture.max());

Merci,

Thibaud.

**Watilin** · 22/07/2010, 12h58

Ok sinon moi j’étais en train de peaufiner une solution « à la bourrin », voilà le code, j’ai testé sur des pages françaises, arabes, russes et japonaises…

Code grosse brute :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function grosseBrute() {
	var pageCode = document.body.innerHTML;
	var re = /<b>(\d+(?:[^\d<]*\d\d\d)*)<\/b>/g;
 
	var nums = [];
	for (i = 3; i--;) {
		matching = re.exec(pageCode);
		if (!matching) throw new Error('pas assez de balises <b>');
		nums.push(Number(matching[1].replace(/\D+/g, '')));
	};
	var max = 0;
	for (var i = 0, n; n = nums[i]; i++) {
		if (n > max) {
			max = n;
		};
	};
	return max;
};

Plus court, et totalement indépendant du DOM

**thibaud74** · 22/07/2010, 13h38

Bravo, ça marche ! Mais peux-tu m'expliquer l'expression régulière, ces parenthèses imbriquées ? Apparemment du récupère tout les nombres dans la balise gras, mais je ne comprend pas bien comment tu obtiens la bonne série de nombres ?

**Watilin** · 22/07/2010, 15h29

Cette regexp ?

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

/<b>(\d+(?:[^\d<]*\d\d\d)*)<\/b>/g

Ah tiens d’ailleurs je peux faire encore mieux, je me suis fourvoyé sur la syntaxe avec les accolades et je croyais que ça marchait pas…

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

/<b>(\d{1,3}(?:[^\d<]*\d{3})*)<\/b>/g

Bon je suppose que tu connais les bases des RegExp dont la syntaxe /motif/options de JavaScript et les trucs comme * et +.

Eh bien l’idée c’est que les nombres sont formatés par Google de façon différente suivant la langue : le séparateur n’est pas toujours le même. Par exemple en français c’est une espace insécable, en japonais une virgule, etc.
Mais dans toutes les langues, les milliers sont regroupés par 3.
On a donc plusieurs cas de figure :

123.456.789 cas évident
999 moins de mille résultats
ne pas oublier également : 12.345, 4.169, 17 etc.

On a donc une forme :

"départ" , "séparateur" , "groupe de 3" , "séparateur" , "groupe de 3" , etc.

ou seulement :

"départ"

soit : "départ" , ("séparateur" , "groupe de 3")*

Pour "départ", il faut donc capturer 1 à 3 chiffres. La syntaxe c’est :

Code regexp :

Sélectionner tout - Visualiser dans une fenêtre à part

\d{1,3}

.
Ensuite je regroupe le reste dans des parenthèses non capturantes (?: … ) (voir le lien ci-dessous pour les détails).

Le séparateur peut être constitué de n’importe quoi sauf des chiffres (et peut être vide, j’en sais rien), donc [^\d]*. Le problème c’est que si on est à la fin du nombre, il va partir sur le reste du HTML, il faut donc exclure également <, donc : [^\d<]+.
Après un séparateur, on a forcément 3 chiffres, donc \d{3}.
On arrive à ceci :

Code regexp :

Sélectionner tout - Visualiser dans une fenêtre à part

\d{1,3}(?:[^\d<]*\d{3})*

Ceci reconnaît les nombres formatés par Google.

Il reste à encapsuler ça dans une balise <b>, et rajouter des parenthèses capturantes autour du nombre :

Code regexp :

Sélectionner tout - Visualiser dans une fenêtre à part

<b>(\d{1,3}(?:[^\d<]*\d{3})*)</b>

On fait attention aux slashes internes, et on ajoute le marqueur g pour avoir toutes les correspondances.

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

var re = /<b>(\d{1,3}(?:[^\d<]*\d{3})*)<\/b>/g

En pratique, la méthode exec() des RegExp fonctionne un peu comme les fgets() ou mysql_fetch() de Php : à chaque nouvel appel il te donne le résultat suivant, et quand il en a marre il renvoie null.
Donc la ligne :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

matching = re.exec(pageCode);

va donner un résultat différent à chaque itération. On pourrait faire une boucle while mais on fait des économies de calcul en s’arrêtant à la troisième fois car on sait qu’il n’y a que 3 <b> dans la page qui correspondent à la RegExp.

Finalement, j’ai obtenu trois nombres sous forme de chaîne, je les nettoie en remplaçant tout ce qui n’est pas numérique (\D+) par une chaîne vide, et je les compare pour garder le plus grand, comme tu as fait.

**thibaud74** · 22/07/2010, 15h53

OK, donc il faut que les trois nombres soient en début de page, sinon ça ne marche pas, c'est le truc qui fait que tu n'as pas besoin du DOM.
Je veux bien le lien sur les parenthèses non capturantes, car je ne le vois pas ?

**Watilin** · 22/07/2010, 16h10

Ah oui pardon, j’ai été emporté par mon élan ^^

http://www.regular-expressions.info/brackets.html
C’est en anglais.

Bonne lecture

**thibaud74** · 22/07/2010, 16h26

Je te remercie Watilin

DOM : saisir le nombre de résultats dans google scholar

JavaScript

Discussions similaires

Partager

Partager