Javascript 북마크를 사용한 단순화된 이메일 추출

웹 페이지에서 이메일 주소를 추출해야 하는 시나리오가 나타났습니다. 이는 유사한 페이지 구조를 로드하지만 각 페이지에서 추출할 이메일 주소가 서로 다른 반복적인 작업이 될 것입니다. 최종 목표는 이러한 이메일 주소를 복사하여 스프레드시트에 붙여넣는 것이었습니다. Javascript를 실행하는 북마크를 만드는 것이 이메일을 추출하는 가장 간단한 방법이었습니다. 방법을 알아봅시다!

이메일 추출

제 특별한 예에서는 추출하려는 이메일이 특정 ID가 있는 테이블 내부에 있었습니다. 이번에도 목표는 이러한 이메일을 추출하여 클립보드에 복사한 다음 수동으로 스프레드시트에 붙여넣는 것이었습니다.

즉시 호출되는 함수 표현식(IIFE)을 만들어 보겠습니다. 이렇게 하면 모든 변수의 범위가 함수 자체로 깔끔하게 유지됩니다. 코드에서 나중에 Wait를 사용하고 싶기 때문에 함수도 async로 정의합니다.

(async () => {

})();

가장 먼저 확인해야 할 것은 실제로 이 코드가 작동할 웹페이지에 있는지입니다. 그렇지 않은 경우 경고를 표시하고 오류를 발생시켜 나머지 코드 실행을 중지해야 합니다.

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');

테이블을 찾을 수 없으면 경고를 표시하고 오류를 발생시켜 나머지 코드 실행을 중지해야 합니다.

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

이제 표 내의 모든 링크를 찾아보겠습니다.

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

또한 emails라는 변수를 생성해 보겠습니다. 이 변수는 우리가 찾은 모든 이메일을 저장할 수 있도록 시작하려면 빈 배열이 될 것입니다.

const emails = [];

테이블에서 찾은 모든 링크를 반복하여 href 속성이 mailto로 시작하는지 확인해야 합니다. 그렇다면 이메일을 찾은 것입니다! mailto: 접두사를 제거하고 이메일 배열에 추가할 수 있는 이메일이 남습니다.

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

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

이제 이메일 배열이 있으므로 각 이메일 사이에 줄 바꿈 문자가 포함된 문자열로 클립보드에 복사해 보겠습니다. 이는 스프레드시트에 데이터를 붙여넣기 위한 준비 과정에서 데이터 형식을 더 효과적으로 지정합니다. 클립보드 API는 비동기 함수이기 때문에 wait를 사용합니다.

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

클립보드에 복사된 이메일 수만 표시하는 작업만 남았습니다.

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

왜 북마크인가?

처음 이 작업을 시작했을 때 Google Chrome Snippet을 사용해 보았습니다. 클립보드에 복사하는 지점에 이르렀을 때 작동하지 않았습니다. 그 이유는 클립보드 사용을 허용하기 전에 사용자가 버튼을 클릭하는 등의 조치를 취해야 하기 때문입니다.

클릭하면 이메일을 받고 클립보드에 복사하는 기능이 실행되는 버튼을 페이지에 삽입했습니다. 그러나 이는 사용자가 브라우저의 개발자 도구를 열고 코드 조각을 실행한 다음 버튼을 클릭해야 함을 의미했습니다. 특히 기술에 능숙하지 않거나 개발자 도구와 같은 것을 사용하는 데 혼란을 느낄 수 있는 사람에게는 단계가 너무 많습니다.

Google Chrome 확장 프로그램을 만들 수도 있지만 물론 스토어에 추가하고 싶은 것은 아닙니다! 이는 매우 구체적인 사용 사례를 위한 것이었습니다. 확장 기능을 개발하고, 패키징한 다음, 압축을 푼 확장 기능을 수동으로 로드하는 방법을 사용자에게 설명해야 합니다! 다시 말하지만, 기술에 익숙하지 않은 사람에게는 쉽지 않습니다.

북마크가 더 쉬워졌습니다! 북마크 URL에서 자바스크립트를 실행할 수 있습니다!

북마크 생성

Google Chrome 메뉴에서 북마크 및 목록 > 북마크 관리자. 북마크 관리자 메뉴에서 새 북마크 추가를 선택하세요.

이름 필드에서 북마크에 Extract Emails와 같은 이름을 지정합니다. URL 필드에 javascript:(예, javascript라는 단어 뒤에 콜론을 포함)를 입력한 다음 코드를 붙여넣어 위에서 이메일을 추출합니다. 북마크를 저장하세요.

북마크바가 표시되지 않으면 Chrome 메뉴로 이동하여 북마크 및 목록 > 북마크바를 표시합니다. 방금 생성한 북마크가 표시됩니다.

URL을 방문하고 북마크를 클릭하면 클립보드에 복사된 이메일 수를 보여주는 알림을 받게 됩니다!

---

저희 웹사이트 https://nightwolf.dev를 방문하고 Twitter에서 팔로우하세요!

위 내용은 Javascript 북마크를 사용한 단순화된 이메일 추출의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!