undefined
Blog > Web Scraping > Post

Comment écrire une requête XPath?

Tuesday, November 16, 2021

Il existe deux façons d'extraire automatiquement des données d'un site web: la première consiste à créer un robot d'exploration du web dans un langage de programmation tel que Python, et la seconde à utiliser un outil de scraping web tel qu'Octoparse pour scraper les données. Mais quelle que soit l'approche adoptée, XPath joue un rôle important : si vous savez comment écrire une requête XPath, vous pouvez récupérer des données plus correctement et plus efficacement.

Dans cet article, nous allons donc nous pencher sur les concepts de base de XPath, la manière d'écrire XPath et certaines des fonctions les plus utilisées.

 

Sommaire

  1. Qu'est-ce que XPath?
  2. Comment fonctionne la requête XPath
  3. Comment rechercher et écrire une requête XPath

II. Comment écrire XPath
 
1. Élément
 2. Attribut
 3. Texte
 4. Relation d'élément

Ⅲ. Les fonctions les plus utilisées de XPath
 1. contains() : spécifie un élément contenant une chaîne de caractères particulière.
 2. position() : spécifie un élément dans une position particulière
 3. et/non/or : spécifie un élément contenant des conditions multiples.

 

I. Concepts de base de XPath

Dans cette partie, nous présentons brièvement les concepts de base de XPath.

1. Qu'est-ce que XPath?

XPath (XML Path Language) est une syntaxe (langage) concise permettant de spécifier des éléments, des valeurs d'attributs, etc., à partir de documents XML/HTML structurés en arborescence.

Les pages Web étant généralement écrites en HTML, XPath est souvent utilisé pour extraire des informations des pages Web. Si vous souhaitez visualiser le HTML d'une page web dans votre navigateur (Chrome, Firefox, etc.), vous pouvez facilement accéder au document HTML correspondant en appuyant sur la touche F12.

HTML

 

2. Comment fonctionne la requête XPath

 

 

Voyons comment fonctionne XPath. L'image ci-dessous fait partie d'un document HTML.

 

HTML est comme une structure arborescente avec différents niveaux. Dans cet exemple, le premier niveau est bookstore, le deuxième niveau est book et title, author, year et price sont tous de troisième niveau.


Le texte avec des crochets (comme <bookstore>) est appelé un élément; les éléments HTML se composent généralement d'une balise de début et d'une balise de fin, avec du contenu inséré entre les deux.

Sa forme: <xx>(balise de début) contenu</xx>(balise de fin)

 

XPaths décrit une structure hiérarchique, séparée par une barre oblique "/", et vous permet de spécifier différents nœuds à partir d'un nœud de référence(Axe), similaire à une URL. Dans cet exemple, pour rechercher l'élément "author", XPath ressemble à ceci:

/bookstore/book/author
Pour mieux comprendre son fonctionnement, découvrez comment trouver un fichier spécifique sur votre ordinateur:
Pour trouver le fichier nommé "Author", le chemin de fichier correct est : bookstore (book) (author).

Tout comme chaque fichier sur votre ordinateur a son propre chemin, chaque élément d'une page Web a un chemin. Ce chemin est décrit dans XPath.

XPath absolu: XPath qui part de l'élément racine (l'élément supérieur du document) et passe par tous les éléments qu'il contient pour atteindre l'élément cible. Par exemple: 

 

/html/body/div/div/div/div/div/div/div/div/div/span/span/span…

 

Les XPaths absolus peuvent être très longs et déroutants, donc pour simplifier les XPaths absolus, vous pouvez utiliser "//" pour omettre les chemins et obtenir une Xpath relative (également appelés XPaths courts), par exemple:

XPath absolue: /bookstore/book/author

XPath relative//author

 

3. Comment rechercher et écrire une requête XPath

 

【Google Chrome】
Affichez une page dans Chrome et affichez les outils de développement à partir du menu contextuel [Vérifier]. En html dans l'onglet Elément, faites un clic droit sur l'élément. Sélectionnez [Copier] -> [Copier XPath] dans le menu. Copiez le XPath dans le presse-papiers pour localiser l'élément.

 

XPathの取得

 

Utilisez "Ctrl + F" à partir du code HTML de la balise d'élément pour appeler le champ de recherche; entrez XPath et l'élément correspondant est sélectionné.

 

enter xpath

 

Vous pouvez également ajouter une extension appelée "XPath Helper", lorsque vous entrez XPath, il vous montrera les résultats correspondants. (Installer XPath Helper)

 

 

【Firefox】 

 

Vous pouvez utiliser l'extension Firebug, disponible dans les anciennes versions de Firefox. 

 

Ouvrez une page Web dans Firefox ➡ cliquez sur le bouton Firebug ➡ cliquez sur un élément de la page ➡ le XPath de l'élément sera affiché

 

firebug

 

 

II. Comment écrire XPath

Cette partie décrit comment localiser et extraire des données de pages Web (HTML) à l'aide de XPath, c'est-à-dire, comment écrire XPath.

 

1. Localiser par élément


Dans l'exemple HTML ci-dessous, vous pouvez voir que le texte est entouré de symboles tels que <> </strong>, <html> </ html>. Les symboles tels que <></strong> sont appelés balises.

 

<balise>contenu</balise>

 

La première balise est appelée "balise de début" et la deuxième balise est appelée "balise de fin". L'ensemble de la balise de début à la balise de fin est appelé un élément.

Les parties affichées en rouge dans le code HTML ci-dessous sont des balises. (Il apparaît en bleu dans Firefox et en violet dans Chrome.)

 

タグ

 

Vous trouverez ci-dessous un résumé des balises que vous voyez souvent en HTML. Voir cet article pour plus de détails!

<a> </a> un lien
<p> </p> un paragraphe
<div> </div> une plage spécifique
<li> </li> un élément de liste
<img> </img> une image
<table> </table> un tableau
<tr> </tr> une ligne de tableau
<td> </td> une colonne de tableau

 

La façon la plus courante d'écrire XPath est d'écrire des balises séparées par des barres obliques "/".

Par exemple, si vous souhaitez obtenir "Harry Potter" à partir de ce code HTML, vous pouvez spécifier "balise html-> balise body-> balise h1" à partir du haut de l'arborescence. Écrit comme:

/html/body/h1
Vous pouvez également utiliser "//" :
//h1
h1
Si vous faites correspondre plusieurs balises, vous pouvez en localiser une. Dans cet exemple, lorsque vous obtenez "7 631 yens", c'est "span" dans la deuxième ligne sous "div", alors écrivez-le comme:
//div/span[2]

 

De manière abstraite, la syntaxe XPath écrite avec des balises est la suivante.

// nom de l'élément
// nom de la balise/nom de la balise

 

2. Localiser par attribut

 

L'attribut détaille les informations de l'étiquette. En ajoutant des attributs aux balises, vous pouvez spécifier des éléments et ajouter des descriptions spécifiques. L'attribut est généralement affiché sous la forme id="booksTitle". Vous pouvez également cibler plusieurs attributs.

 

<Nom de l'élément Nom de l'attribut="valeur de l'attribut">

 

Les attributs les plus courants sont href, title, style, src, id, class, etc. Voir cet article pour plus de détails!

 

Les attributs sont représentés par la fonction "@".
Par exemple, si vous voulez obtenir "Harry Potter", veuillez écrire XPath comme:
//h1[@id="booksTitle"]

id
De façon abstraite, la syntaxe XPath écrite dans l'attribut est la suivante:

 

//nom de la balise [@nom d'attribut = "valeur d'attribut"]

 

Si vous voulez obtenir tous les éléments avec les mêmes attributs, écrivez:

 

//*[@nom d'attribut="valeur d'attribut"]

 

3. Localiser par texte

 

Le texte est contenu dans l'étiquette comme indiqué ci-dessous.

<nom de la balise> texte</nom de la balise>

La récupération de données à partir d'une page Web consiste généralement à récupérer du contenu ou du texte dans la page. Ainsi, vous pouvez directement localiser le texte que vous souhaitez obtenir.

Dans XPath, le texte est représenté par la fonction "text()".

Par exemple, si vous voulez obtenir "Harry Potter", spécifiez le texte et écrivez-le:

//h1[text()="Harry Potter"]
text
De manière abstraite, la syntaxe XPath écrite dans l'attribut est la suivante:

// Nom de la balise [text() = "Texte à récupérer"]

Si vous souhaitez obtenir le même texte pour tous les éléments, écrivez:

// * [text() = "Texte à récupérer"]

 

4. Localiser par des relations de balises

 

Dans l'arborescence HTML, tous les éléments ont une relation parent-enfant/frère.

L'élément qui contient un ou plusieurs éléments est appelé élément parent et l'élément contenu est appelé élément enfant.

 

L'élément enfant n'a qu'un seul élément parent et est situé entre les balises de début et de fin de l'élément parent. Les éléments ayant le même élément parent sont appelés éléments frères.


Regardons également un exemple spécifique.

L'exemple suivant est basé sur l'élément <body>, où l'élément <body> est l'élément parent des éléments <h1> et <div>, et les éléments <h1> et <div> sont les éléments enfants du < body> element. Ceci permet d'obtenir le parent-enfant/ Exemples d'éléments frères et de changer le style de chaque élément.

Les éléments <h1> et <div> sont frères car ils ont le même élément parent <body>.

De plus, puisque l'élément <div> est l'élément parent de deux éléments <span>, les deux éléments <span> sont les descendants de l'élément <body>.

body

 

Vous pouvez obtenir les éléments qui ont une relation parent-enfant ou frère basée sur l'élément actuel. Par exemple, si vous souhaitez obtenir «7 631 yens», vous pouvez l'écrire comme suit en l'associant à une étiquette.

Considérez-le comme un élément enfant de l'élément <div>:
//div/span[2]
Considérez-le comme un descendant de l'élément <body>:
//body//span[2]
Considérez-le comme un élément frère de <span class = "author notFaded">
//span[@class="author notFaded"]/following-sibling::span[1]
Considérez-le comme un élément frère de <span class="tax_postage">
//span[@class="tax_postage"]/preceding-sibling::span[1]

 

Deux fonctions, « following-sibling :: » et « preceding-sibling :: », sont généralement utilisées pour localiser les balises frères.
"Following-sibling ::" localiser l'élément frère après l'élément spécifié

"Preceding-sibling ::" localiser l'élément frère avant l'élément spécifié

"Following-sibling ::" est très utile pour des éléments du tableau. Par exemple, il y a l'exemple HTML suivant.
兄弟要素

 

Ce HTML ressemble à un tableau comme celui ci-dessous.
店名 12345
ジャンル 居酒屋
予約可否 予約可

Dans cet exemple, nous voulons obtenir le nom du magasin "12345". Cependant, il existe plusieurs éléments <td>, // td [1] ne peut pas les gérer. De plus, si vous souhaitez obtenir une table avec la même structure à partir de plusieurs pages à la fois, il est recommandé d'utiliser "following-sibling ::" avec une valeur fixe comme l'axe. 

//th[text()="店名"]/following-sibling::td[1]
店名
De manière abstraite, la requête XPath écrite avec des relations de balise est la suivante:

Elément parent: // nom de balise d'axe / ..
Élément enfant: // nom de balise d'axe / nom de l'élément enfant
Elément descendant:  // nom de balise d'axe // nom de l'élément descendant
L'élément frère suivant: // nom de balise d'axe / follow-sibling:: nom de l'élément frère après lui
L'élément frère précédent: // nom de balise d'axe / preceding-sibling:: nom de l'élément frère avant lui

S'il existe plusieurs correspondances qui répondent aux critères, vous pouvez ajouter [N] pour spécifier le Nième élément.

 

Ⅲ. Les fonctions les plus utilisées de XPath

 

Dans cette partie, je présenterai les fonctions fréquemment utilisées par XPath afin de localiser plus précisément les données dans la page Web.

 

1.contains() : localise un élément qui contient une chaîne spécifique

 

contains() est généralement utilisé pour la recherche floue de chaînes contenues dans des valeurs d'attribut ou du texte.

contains(@class, "XXX") : localise l'élément dont la valeur d'attribut contient une chaîne spécifique.

 

contains

 

Par exemple, si vous souhaitez obtenir tout le contenu contenant Red dans l'attribut class à partir du HTML, Xpath:

 

//span[contains(@class,“Red”)]

 

En d'autres termes, ce XPath signifie obtenir un élément span qui contient Red dans l'attribut class.
red

 

contains(text(), "XXX") : spécifiez un élément dont le texte contient une chaîne spécifique

 

text1

 

Par exemple, si vous souhaitez localiser un élément contenant le caractère "Rowling" à partir de ce code HTML:

//span[contient(text(),"Rowling")]
Lors du positionnement du bouton de pagination, 【contains (text(), “next”)】 est souvent utilisé.

 

2.position(): localiser l'élément à une position spécifique

 

html

 

1.position()=

Par exemple, dans le code HTML ci-dessus, "Product 3" est le quatrième élément, il est donc écrit comme suit.
//tbody/th[4]

2.position()= 

//tbody/th[position()=4]

3.position()>

Si vous souhaitez obtenir des éléments autres que "ad", car "ad" est le premier élément, Xpath:

//tbody/th[position()>1]

 

position

 

3.and/not/or : sélectionner des éléments contenant plusieurs conditions

 

and- Sélectionner des éléments qui correspondent à plusieurs conditions

 

and

 

Si vous souhaitez obtenir le href incluant "S_20" et "pdf" à partir de ce HTML:

 

//a[contains(@href,“S_20”) and contains(@href,“pdf”)]

 

not- Sélectionner des éléments qui ne contiennent pas de conditions spécifiques

 

not

 

Si vous souhaitez obtenir @href autre que https://helpcenter.octoparse.jp/hc/ja/xpath/S_10.html à partir de ce code HTML:

 

//a[not(contains(@href, "S_10"))]

 

or- Sélectionner des éléments qui correspondent à l'une des multiples conditions

 

or

 

Si vous souhaitez obtenir le href contenant M ou L à partir de ce code HTML:

 

//a[contains(@href,”M_”) or contains(@href,”L_”)]

 

De plus, si vous souhaitez obtenir un href autre que M ou L, veuillez combiner not et or:

 

//a[not(contains(@href,”M_”) or contains(@href,”L_”))]

 

Si vous souhaitez en savoir plus sur la requête et les fonctions XPath, veuillez vous référer à cet article.

 

Conclusion:

La requête Xpath est hautement recommandé parce qu'elle est facile à utiliser pour l'exploration du Web. Combiné à des expressions régulières, il permet d'obtenir des données encore plus intéressantes. Il est donc fortement recommandé aux débutants qui souhaitent utiliser des outils de crawler!

 

Auteur : L'équipe Octoparse

 

Téléchargez Octoparse pour démarrer le web scraping ou contactez-nous pour toute autre demande
questions sur le web scraping!

Contactez-Nous Télécharger
Nous utilisons des cookies pour améliorer votre expérience de navigation. Découvrez comment nous utilisons les cookies et comment vous pouvez les contrôler en cliquant sur les paramètres des cookies. Si vous continuez à utiliser ce site, vous consentez à notre utilisation des cookies.
Accepter Rejeter