Get Title from URL

title-from-url.ts

// Note: this gist is a part of this OSS project that I'm currently working on: https://github.com/steven-tey/dub

export default async function getTitleFromUrl (url: string) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 2000); // timeout if it takes longer than 2 seconds
  const title = await fetch(url, { signal: controller.signal })
    .then((res) => {
      clearTimeout(timeoutId);
      return res.text();
    })
    .then((body: string) => {
      let match = body.match(/<title>([^<]*)<\/title>/); // regular expression to parse contents of the <title> tag
      if (!match || typeof match[1] !== "string") return "No title found"; // if no title found, return "No title found"
      return match[1];
    })
    .catch((err) => {
      console.log(err);
      return "No title found"; // if there's an error, return "No title found"
    });
  return title;
};

Super cool gist! I ran into an issue when sites' titles had attributes inside (common for sites that use react-helmet) so I'd propose this fix to get around that problem:

.then((body: string) => {
      const match = body.match(/<title([^<]*)>([^<]*)<\/title>/) // regular expression to parse contents of the <title> tag
      if (!match || typeof match[match.length - 1] !== "string")
        return "No title found" // if no title found, return "No title found"
      return match[match.length - 1]
    })