Es trat ein Szenario auf, in dem E-Mail-Adressen aus einer Webseite extrahiert werden mussten. Dies würde eine sich wiederholende Aufgabe sein, bei der eine ?hnliche Seitenstruktur geladen würde, jedoch mit unterschiedlichen E-Mail-Adressen, die von jeder Seite extrahiert werden müssten. Das Endziel bestand darin, diese E-Mail-Adressen zu kopieren und in eine Tabelle einzufügen. Das Erstellen eines Lesezeichens, auf dem Javascript ausgeführt wurde, war der einfachste Ansatz zum Extrahieren der E-Mails. Lass uns lernen wie!

E-Mails extrahieren

In meinem speziellen Beispiel befanden sich die E-Mails, die wir extrahieren wollten, in einer Tabelle mit einer bestimmten ID. Auch hier bestand das Ziel darin, diese E-Mails zu extrahieren, in die Zwischenablage zu kopieren und sie manuell in eine Tabelle einzufügen.

Beginnen wir mit der Erstellung eines sofort aufgerufenen Funktionsausdrucks (IIFE). Dadurch bleiben alle Variablen sauber auf die Funktion selbst beschr?nkt. Da wir ?await“ sp?ter im Code verwenden m?chten, definieren wir die Funktion auch als asynchron.

(async () => {

})();

Als Erstes sollten wir prüfen, ob wir uns tats?chlich auf der Webseite befinden, auf der dieser Code funktioniert. Ist dies nicht der Fall, sollten wir eine Warnung anzeigen und einen Fehler ausl?sen, um die Ausführung des restlichen Codes zu stoppen.

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

Suchen wir diese Tabelle anhand ihrer eindeutigen ID.

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

Wenn die Tabelle nicht gefunden werden kann, sollten wir eine Warnung anzeigen und einen Fehler ausl?sen, um die Ausführung des restlichen Codes zu stoppen.

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

Jetzt suchen wir nach allen Links in der Tabelle.

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

Lassen Sie uns auch eine Variable namens emails erstellen, die zun?chst ein leeres Array ist, damit wir alle gefundenen E-Mails speichern k?nnen.

const emails = [];

Wir müssen alle in der Tabelle gefundenen Links durchgehen und prüfen, ob das href-Attribut mit mailto beginnt. Wenn ja, dann haben wir eine E-Mail gefunden! Wir entfernen das Pr?fix ?mailto:“ und es bleibt die E-Mail übrig, die wir dem E-Mail-Array hinzufügen k?nnen.

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

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

Da wir nun eine Reihe von E-Mails haben, kopieren wir sie als Zeichenfolge mit einem Zeilenumbruchzeichen zwischen den einzelnen E-Mails in die Zwischenablage. Dadurch werden die Daten besser formatiert, um sie auf das Einfügen in die Tabelle vorzubereiten. Wir verwenden ?await“, da die Zwischenablage-API eine asynchrone Funktion ist.

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

Jetzt müssen Sie nur noch anzeigen, wie viele E-Mails in die Zwischenablage kopiert wurden.

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

Hier ist der endgültige Code:

(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`);
})();

Warum ein Lesezeichen?

Als ich anfing, daran zu arbeiten, habe ich versucht, ein Google Chrome-Snippet zu verwenden. Als ich dazu kam, in die Zwischenablage zu kopieren, funktionierte es nicht. Der Grund dafür ist, dass der Benutzer eine Aktion ausführen muss, beispielsweise auf eine Schaltfl?che klicken, bevor er die Verwendung der Zwischenablage zul?sst.

Ich habe eine Schaltfl?che in die Seite eingefügt, die beim Klicken die Funktion ausführt, E-Mails abzurufen und in die Zwischenablage zu kopieren. Das bedeutete jedoch, dass der Benutzer die Entwicklertools des Browsers ?ffnen, das Snippet ausführen und dann auf die Schaltfl?che klicken musste. Zu viele Schritte, insbesondere für jemanden, der m?glicherweise nicht technisch versiert ist oder mit der Verwendung von Entwicklertools verwechselt werden würde.

Ich k?nnte auch eine Google Chrome-Erweiterung erstellen, aber das wollte ich natürlich nicht zum Store hinzufügen! Dies war für einen ganz bestimmten Anwendungsfall. Ich müsste die Erweiterung entwickeln, verpacken und dem Benutzer erkl?ren, wie man eine entpackte Erweiterung manuell l?dt! Auch hier ist es nicht einfach für jemanden, der vielleicht nicht technisch versiert ist.

Ein Lesezeichen war einfacher! Sie k?nnen Javascript in einer Lesezeichen-URL ausführen!

Lesezeichen erstellen

Navigieren Sie im Menü von Google Chrome zu Lesezeichen und Listen > Lesezeichen-Manager. W?hlen Sie im Menü Lesezeichen-Manager die Option Neues Lesezeichen hinzufügen.

Geben Sie dem Lesezeichen im Feld ?Name“ einen Namen wie ?E-Mails extrahieren“. Geben Sie im URL-Feld zun?chst javascript: ein (ja, fügen Sie den Doppelpunkt nach dem Wort javascript ein) und fügen Sie dann den Code ein, um die E-Mails von oben zu extrahieren. Speichern Sie das Lesezeichen.

Wenn die Lesezeichenleiste nicht sichtbar ist, gehen Sie zum Menü von Google Chrome und w?hlen Sie Lesezeichen und Listen > Lesezeichenleiste anzeigen. Das gerade erstellte Lesezeichen sollte sichtbar sein.

Besuchen Sie die URL, klicken Sie auf das Lesezeichen und Sie sollten eine Benachrichtigung erhalten, die Ihnen die Anzahl der in die Zwischenablage kopierten E-Mails anzeigt!

Besuchen Sie unsere Website unter https://nightwolf.dev und folgen Sie uns auf Twitter!

Das obige ist der detaillierte Inhalt vonVereinfachte E-Mail-Extraktion mit Javascript-Lesezeichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!