How to get the full HTML of a website using the fetch() method in JavaScript?

December 10, 2020 - 2 min read

/* Get full HTML from website using fetch() */
fetch(url)
  .then((res) => res.text())
  .then((html) => console.log(html));

Let's say we want to get the full HTML document of website https://google.com.

// URL
const url = "https://google.com";

First of all, We can use the fetch() method and pass the url as the first argument to the method like this,

// URL
const url = "https://google.com";

// pass url to fetch() method
fetch(url);

Since the fetch() method returns a Promise, we can attach a then() handler so that when the Promise resolves then() handler will be executed and will be passed the buffer response obtained from the website.

Now, this is where we need to convert the buffer response into text so that we can view the HTML as plain text. For that we can use the text() method on the response object passed to the then() handler.

It can be done like this,

// URL
const url = "https://google.com";

// pass url to fetch() method
// attach a then() handler
fetch(url).then((res) => {
  return res.text(); // using the text() method on the response
});

After converting our responce we can attach one more then() handler to view the HTML plain text like this,

// URL
const url = "https://google.com";

// pass url to fetch() method
// attach a then() handler
fetch(url)
  .then((res) => {
    return res.text();
  })
  .then((html) => {
    console.log(html); // We will get our converted HTML plain text
  });

See this example live in repl.it.

After getting the HTML plain text, you can do cool stuff like scraping the HTML DOM for data using packages like cheerio, Native DOMParser, etc.

Feel free to share if you found this useful 😃.