Grab HTML of any Website using JavaScript without getting blocked - Wholly API

Sh Raj - Jan 24 '22 - - Dev Community

πŸ”† Wholly API :- https://wholly-api.sh20raj.repl.co/

API endpoint-

https://wholly-api.sh20raj.repl.co/get/website-data.php

Fetch Using JavaScript :- Ref. Google


See Example :-
Fetching example.com

https://wholly-api.sh20raj.repl.co/get/website-data.php?get_html=https://example.com/

The result looks like here

<!doctype html> <html> <head>     <title>Example Domain</title>      <meta charset="utf-8" />     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1" />     <style type="text/css">     body {         background-color: #f0f0f2;         margin: 0;         padding: 0;         font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;              }     div {         width: 600px;         margin: 5em auto;         padding: 2em;         background-color: #fdfdff;         border-radius: 0.5em;         box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);     }     a:link, a:visited {         color: #38488f;         text-decoration: none;     }     @media (max-width: 700px) {         div {             margin: 0 auto;             width: auto;         }     }     </style>     </head>  <body> <div>     <h1>Example Domain</h1>     <p>This domain is for use in illustrative examples in documents. You may use this     domain in literature without prior coordination or asking for permission.</p>     <p><a href="https://www.iana.org/domains/example">More information...</a></p> </div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Let's do it Using JavaScript (Fetch API)

Ref. -> https://www.google.com/search?q=javascript+fetch+api

Sample JavaScript Code

fetch('https://wholly-api.000webhostapp.com/get/website-data.php?get_html=https://example.com/')
  .then(response => response.text())
  .then(data => console.log(data));
Enter fullscreen mode Exit fullscreen mode

Result

<!doctype html> <html> <head>     <title>Example Domain</title>      <meta charset="utf-8" />     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1" />     <style type="text/css">     body {         background-color: #f0f0f2;         margin: 0;         padding: 0;         font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;              }     div {         width: 600px;         margin: 5em auto;         padding: 2em;         background-color: #fdfdff;         border-radius: 0.5em;         box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);     }     a:link, a:visited {         color: #38488f;         text-decoration: none;     }     @media (max-width: 700px) {         div {             margin: 0 auto;             width: auto;         }     }     </style>     </head>  <body> <div>     <h1>Example Domain</h1>     <p>This domain is for use in illustrative examples in documents. You may use this     domain in literature without prior coordination or asking for permission.</p>     <p><a href="https://www.iana.org/domains/example">More information...</a></p> </div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Working on a Project. WebScrapperJS - That can Get Content/HTML of any website without being blocked by CORS even using JavaScript integrated with WhollyAPI. You can also contribute on GitHub.

GitHub logo SH20RAJ / WebScrapperJS

WebScrapperJS - Get Content/HTML of any website without being blocked by CORS even using JavaScript by WhollyAPI

WebScrapperJS

WebScrapperJS - Get Content/HTML of any website without being blocked by CORS even using JavaScript by WhollyAPI


Website :- https://sh20raj.github.io/WebScrapperJS/

GitHub | Repl.it | Dev.to Article


Grab the CDN or Download the JavaScript File

<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/WebScrapperJS/WebScrapper.js" ></script>
Enter fullscreen mode Exit fullscreen mode

  • WebScrapper.get() will return you the content of the provided url in a String.

  • WebScrapper.gethtml() will return you the content of the provided url as Parsed DOM. ( Will get the html and Parse it as a DOM object . Will return you a #Document)

  • WebScrapper.getjson() will return you the content of the provided url as Parsed JSON.


To Get HTML/Text/Content of Any Website in a String.

var html = WebScrapper.get('https://webscrapperjs.sh20raj.repl.co/');//This will be return the HTML/Text inside the webpage in a String.
console.log(html);
Enter fullscreen mode Exit fullscreen mode

This will be return the HTML/Text inside the webpage in…

Alternate website :- https://wholly-api.sh20raj.repl.co/

. . . . . .