Extraction simplifiée d'e-mails avec Javascript

Un scénario s'est produit dans lequel il était nécessaire d'extraire des adresses e-mail d'une page Web. Cela allait être une tâche répétitive, consistant à charger une structure de page similaire, mais avec des adresses e-mail différentes à extraire de chaque page. L'objectif final était de copier et coller ces adresses e-mail dans une feuille de calcul. La création d'un signet exécutant Javascript était l'approche la plus simple pour extraire les e-mails. Apprenons comment !

Extraire les e-mails

Dans mon exemple particulier, les e-mails que nous voulions extraire se trouvaient à l'intérieur d'une table qui avait un identifiant spécifique. Encore une fois, l'objectif était d'extraire ces e-mails, de les copier dans le presse-papiers et de les coller manuellement dans une feuille de calcul.

Commençons par créer une expression de fonction immédiatement invoquée (IIFE). Cela permettra de conserver toutes les variables parfaitement adaptées à la fonction elle-même. Parce que nous voulons utiliser wait plus tard dans le code, nous définissons également la fonction comme async.

(async () => {

})();

La première chose que nous devons vérifier est si nous sommes réellement sur la page Web sur laquelle ce code fonctionnera. Si ce n’est pas le cas, nous devrions afficher une alerte et générer une erreur pour empêcher l’exécution du reste du code.

if (!window.location.href.startsWith('URL_HERE')) {
  const hrefError = 'This bookmark cannot be used on this webpage.';
  alert(hrefError);
  throw hrefError;
}

Trouvons cette table par son identifiant unique.

const table = document.getElementById('ID_HERE');

Si la table est introuvable, nous devons afficher une alerte et générer une erreur pour arrêter l'exécution du reste du code.

if (!table) {
  const tableError = 'Table not found';
  alert(tableError);
  throw tableError);
}

Recherchons maintenant tous les liens dans le tableau.

const links = table.getElementsByTagName('a');

Créons également une variable appelée emails, qui sera un tableau vide pour commencer, afin que nous puissions stocker tous les e-mails que nous trouvons.

const emails = [];

Nous devons parcourir tous les liens que nous avons trouvés dans le tableau et voir si l'attribut href commence par mailto. Si c’est le cas, alors nous avons trouvé un e-mail ! Nous supprimerons le préfixe mailto: et nous retrouverons l'e-mail que nous pouvons ajouter au tableau emails.

for (const link of links) {
  const href = link.getAttribute('href');

  if (href && href.startsWith('mailto:')) {
    emails.push(href.substring(7));
  }
}

Maintenant que nous avons un tableau d'e-mails, copions-les dans le presse-papiers sous forme de chaîne avec un caractère de nouvelle ligne entre chaque e-mail. Cela formate mieux les données en vue de les coller dans la feuille de calcul. Nous utilisons wait car l'API du presse-papiers est une fonction asynchrone.

await navigator.clipboard.writeText(emails.join('\n'));

Il ne reste plus qu'à afficher combien d'e-mails ont été copiés dans le presse-papiers.

alert(`${emails.length} emails copied to clipboard`);

Voici le code final :

(async () => {
  if (!window.location.href.startsWith('URL_HERE')) {
    const hrefError = 'This bookmark cannot be used on this webpage.';
    alert(hrefError);
    throw hrefError;
  }

  const table = document.getElementById('ID_HERE');

  if (!table) {
    const tableError = 'Table not found';
    alert(tableError);
    throw tableError;
  }

  const links = table.getElementsByTagName('a');
  const emails = [];

  for (const link of links) { 
    const href = link.getAttribute('href'); 

    if (href && href.startsWith('mailto:')) { 
      emails.push(href.substring(7)); 
    } 
  }

  await navigator.clipboard.writeText(emails.join('\n'));
  alert(`${emails.length} emails copied to clipboard`);
})();

Pourquoi un marque-page ?

Quand j'ai commencé à travailler là-dessus, j'ai essayé d'utiliser un extrait de Google Chrome. Quand je suis arrivé au point de copier dans le presse-papiers, cela n’a pas fonctionné. La raison en est que l'utilisateur doit agir, comme cliquer sur un bouton, avant d'autoriser l'utilisation du presse-papiers.

J'ai injecté un bouton dans la page qui, une fois cliqué, exécuterait la fonction permettant de recevoir des e-mails et de les copier dans le presse-papiers. Cependant, cela signifiait que l’utilisateur devait ouvrir les outils de développement du navigateur, exécuter l’extrait, puis cliquer sur le bouton. Trop d'étapes, en particulier pour quelqu'un qui n'est peut-être pas doué en technologie ou qui serait confus par l'utilisation de quelque chose comme les outils de développement.

Je pourrais également créer une extension Google Chrome, mais ce n’est bien sûr pas quelque chose que je voulais ajouter à la boutique ! C'était pour un cas d'utilisation très spécifique. Je devrais développer l'extension, la conditionner et expliquer à l'utilisateur comment charger manuellement une extension décompressée ! Encore une fois, ce n’est pas facile pour quelqu’un qui n’est peut-être pas doué en technologie.

Un marque-page était plus simple ! Vous pouvez exécuter javascript dans une URL de favori !

Créer un signet

Dans le menu de Google Chrome, accédez à Favoris et listes > Gestionnaire de favoris. Dans le menu Gestionnaire de favoris, choisissez Ajouter un nouveau favori.

Dans le champ Nom, donnez au signet un nom comme Extraire les e-mails. Dans le champ URL, commencez par taper javascript: (oui, incluez les deux-points après le mot javascript), puis collez le code pour extraire les e-mails d'en haut. Enregistrez le favori.

Si la barre de favoris n'est pas visible, accédez au menu de Google Chrome et choisissez Favoris et listes > Afficher la barre de favoris. Le favori que vous venez de créer devrait être visible.

Visitez l'url, cliquez sur le signet et vous devriez recevoir une alerte vous indiquant le nombre d'e-mails copiés dans le presse-papiers !

---

Visitez notre site Web à https://nightwolf.dev et suivez-nous sur Twitter !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!