-1

As shown in the picture below, I am looking to be able to format a pasted external URL with the website's title, and first image that shows up on the page.

In this example, if someone posted the URL to this article, I would somehow want to go out and fetch the URL's information and obtain the title - "The Conclusion Of..." and the image shown.

I'm using React and JavaScript, where would I even start for something like this? Thanks for the help.

enter image description here

devon66h
  • 305
  • 2
  • 7

2 Answers2

0

I was able to obtain the title of a url using Cheerio and this example found here

devon66h
  • 305
  • 2
  • 7
0

A browser-only, limited solution be render the link in a iframe, then try this querySelector:

document.getElementById("my-iframe-id").windowContent.document.body.querySelector("img")

But this would only work if the iframe and your site are same origin, see this answer for details.

So a more practical solution would require help from a server. You build an API to receive the link, then the server basically run a scraper to dig out the first image, and send back the link to client.

hackape
  • 11,966
  • 1
  • 15
  • 40