出現(xiàn)了一個場景，需要從網(wǎng)頁中提取電子郵件地址。這將是一項重復(fù)性任務(wù)，加載類似的頁面結(jié)構(gòu)，但從每個頁面提取不同的電子郵件地址。最終目標是將這些電子郵件地址復(fù)制并粘貼到電子表格中。創(chuàng)建運行 JavaScript 的書簽是提取電子郵件的最簡單方法。讓我們來學(xué)習(xí)一下吧！

提取電子郵件

在我的特定示例中，我們想要提取的電子郵件位于具有特定 ID 的表內(nèi)。同樣，我們的目標是提取這些電子郵件，將它們復(fù)制到剪貼板，然后手動將它們粘貼到電子表格中。

我們首先創(chuàng)建一個立即調(diào)用函數(shù)表達式 (IIFE)。這將使所有變量的范圍清晰地限定在函數(shù)本身范圍內(nèi)。因為我們后面要在代碼中使用await，所以我們也將函數(shù)定義為async。

(async () => {

})();

我們應(yīng)該檢查的第一件事是我們是否確實在該代碼將起作用的網(wǎng)頁上。如果不是，我們應(yīng)該顯示警報并拋出錯誤以停止其余代碼的運行。

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

讓我們通過其唯一 ID 找到該表。

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

如果找不到表，我們應(yīng)該顯示警報并拋出錯誤以停止其余代碼的運行。

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

現(xiàn)在讓我們查找表中的所有鏈接。

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

我們還創(chuàng)建一個名為 emails 的變量，它將是一個空數(shù)組，以便我們可以存儲找到的所有電子郵件。

const emails = [];

我們需要循環(huán)遍歷表中找到的所有鏈接，看看 href 屬性是否以 mailto 開頭。如果是，那么我們就找到了一封電子郵件！我們將刪除 mailto: 前綴并留下可以添加到 emails 數(shù)組中的電子郵件。

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

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

現(xiàn)在我們有了一個電子郵件數(shù)組，讓我們將它們作為字符串復(fù)制到剪貼板，每封電子郵件之間有一個換行符。這可以更好地格式化數(shù)據(jù)，為將數(shù)據(jù)粘貼到電子表格中做好準備。我們使用await，因為剪貼板API是一個異步函數(shù)。

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

剩下要做的就是顯示有多少電子郵件被復(fù)制到剪貼板。

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

這是最終代碼：

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

為什么要書簽？

當(dāng)我第一次開始研究這個問題時，我嘗試使用 Google Chrome Snippet。當(dāng)我要復(fù)制到剪貼板時，它不起作用。原因是因為用戶必須在允許使用剪貼板之前執(zhí)行操作，例如單擊按鈕。

我在頁面中注入了一個按鈕，單擊該按鈕將運行該功能以獲取電子郵件并將其復(fù)制到剪貼板。然而，這意味著用戶必須打開瀏覽器的開發(fā)人員工具，運行代碼片段，然后單擊按鈕。步驟太多，特別是對于那些可能不懂技術(shù)或?qū)κ褂瞄_發(fā)人員工具之類的東西感到困惑的人。

我還可以創(chuàng)建一個 Google Chrome 擴展程序，但這當(dāng)然不是我想添加到商店的東西！這是針對一個非常具體的用例。我必須開發(fā)擴展，將其打包，并向用戶解釋如何手動加載未打包的擴展！再說一次，對于不懂技術(shù)的人來說這并不容易。

書簽更容易！您可以在書簽網(wǎng)址中運行 javascript！

創(chuàng)建書簽

在 Google Chrome 的菜單中，導(dǎo)航至“書簽和列表”>書簽管理器。在書簽管理器菜單下，選擇添加新書簽。

在“名稱”字段中，為書簽指定一個名稱，例如“提取電子郵件”。在 URL 字段中，首先輸入 javascript:（是的，在 javascript 一詞后添加冒號），然后粘貼代碼以從上面提取電子郵件。保存書簽。

如果您看不到書簽欄，請轉(zhuǎn)到 Google Chrome 的菜單并選擇“書簽和列表”>“書簽”。顯示書簽欄。您剛剛創(chuàng)建的書簽應(yīng)該是可見的。

訪問網(wǎng)址，單擊書簽，您應(yīng)該會收到一條提醒，顯示復(fù)制到剪貼板的電子郵件數(shù)量！

---

訪問我們的網(wǎng)站 https://nightwolf.dev 并在 Twitter 上關(guān)注我們！

以上是使用 Javascript 書簽簡化電子郵件提取的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！