Skip to main content

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.min.js" ></script>
Enter fullscreen mode Exit fullscreen mode

To Get HTML/Text Content of Any Website WebScrapper.gethtml() or WebScrapper.get()

var url = 'https://google.com/';
var html = WebScrapper.gethtml(url);//html of the url will be stored in this variable
console.log(html);
Enter fullscreen mode Exit fullscreen mode

WebScrapper.gethtml() or WebScrapper.get() both are similar.


Intialise own WebScrapper with URL new scrapper()

let MyWebScrapper = new scrapper('https://example.com/');
//You can now directly call gethtml() instead of passing a url into it.

console.log(MyWebScrapper.gethtml()); //Grab https://example.com/ and print on console

Enter fullscreen mode Exit fullscreen mode

Still you can Use new created scrapper MyWebScrapper for grabbing new URLs. Like

let MyWebScrapper = new scrapper('https://example.com/');
//You can now directly call gethtml() instead of passing a url into it.

console.log(MyWebScrapper.gethtml()); //Grab https://example.com/ and print on console

console.log(MyWebScrapper.gethtml('https://example.com/')); //Grab https://youtube.com/ and print on console

Enter fullscreen mode Exit fullscreen mode

You can also fetch JSON Using WebScrapperJS

var json = WebScrapper.getjson('https://jsonplaceholder.typicode.com/todos/1');//Return result direct in json format
console.log(json);
Enter fullscreen mode Exit fullscreen mode

Try This


Getting Result more Faster

Use the Below codes/methods only if the origin or feching URL is not blocked by CORS Like this

cors preview

if your origin is not blocking you then you must use the below fetch() code instead of gethtml() directly.
because it returns the results faster without using API.It will directly fetch origin using AJAX.

Use WebScrapper.fetch() to get the html/text

We will use this url https://webscrapperjs.sh20raj.repl.co/ because it is not blocked.

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

Try this

Use WebScrapper.fetchjson() to get the Parsed JSON

var json = WebScrapper.fetchjson('https://webscrapperjs.sh20raj.repl.co/sample.json');//This will be return the JSON inside the webpage. 
console.log(json);
Enter fullscreen mode Exit fullscreen mode

Try this


Try this on Codepen

Sample Code | Codepen :- https://codepen.io/SH20RAJ/pen/VwrwjXJ?editors=1001

<div id="scrappedcontent"></div>

<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/WebScrapperJS/WebScrapper.min.js" ></script> 
<script>
  let MyWebScrapper = new scrapper('https://google.com/');
//You can now directly call gethtml() instead of passing a url into it.

console.log(MyWebScrapper.gethtml()); //Grab https://example.com/ and print on console
var html = MyWebScrapper.gethtml('https://example.com/');

console.log(html); //Grab https://youtube.com/ and print on console

document.getElementById('scrappedcontent').innerHTML = html;
</script>
Enter fullscreen mode Exit fullscreen mode

See Results Here

Comments

Popular posts from this blog

How to Get Free Unlimited Bandwidth and Storage Using jsDelivr and GitHub

How to Get Free Unlimited Bandwidth and Storage Using jsDelivr and GitHub Are you tired of paying for expensive content delivery networks (CDNs) and storage solutions for your web projects? Look no further! In this guide, we'll show you how to leverage jsDelivr and GitHub to get free unlimited bandwidth and storage. Whether you're a seasoned developer or just getting started, this solution will save you money and improve the performance of your web projects. What is jsDelivr? jsDelivr is a free, fast, and reliable CDN for open-source files. It provides a convenient way to serve your static assets (like JavaScript, CSS, images, and more) with the benefits of a global CDN, including faster load times and unlimited bandwidth. What is GitHub? GitHub is a popular platform for version control and collaboration. It allows you to host your code repositories and manage your projects with ease. By combining GitHub with jsD

Best VS Code extensions for developers in 2024

Here are some of the best VS Code extensions for developers in 2024, including a range of productivity tools, debuggers, and visual enhancements to streamline your coding workflow. Additionally, you'll find some popular themes to customize your editor's appearance. Top VS Code Extensions for Developers in 2024 Shade Theme by SH20RAJ Enhance your code readability with this well-designed theme, perfect for long coding sessions. Shade Theme Prettier A widely used code formatter that ensures your code is styled consistently across your projects. Prettier GitLens Provides rich visualizations and insights into your Git repository, helping you understand code changes and history. GitLens Auto Rename Tag Automatically renames paired HTML/XML tags, reducing errors and saving time. Auto Rename Tag Bracket Pair Colorizer Colors matching brackets to improve code readability, especially useful for complex nested structures. Bracket Pair Colorizer CSS Peek

Unlimited Articles for Blogger/WordPress just copy paste html ft. dev.to

About Copyrights :- Actually we don't need it in the case or dev.to because dev.to itself provides an API that can be used to grab content from whole dev.to Articles content to our website. What do you think about it. Please reply Checkout the API docs and terms and say if still you will be not agree I will remove this content. Dev.to :-  https://dev.to/

Random Posts