I am trying to write HTML code that hits a URL and fetches me it's page source i.e. the whole content which we see when we right click on the page and select the 'View Page Source' option.
I then want to process this content to extract some relevant values.
I have tried a few options on a W3schools TryIt Editor but nothing worked. I have tried for other URLs also, but no luck.
Can someone please tell if this is possible using HTML and JavaScript and if yes, how?
You can make an HTTP request using the Fetch API pretty simply:
const res = await fetch('https://example.com');
const html = await res.text();
However, this is only going to work for URLs that allow you to fetch their sources cross-origin. For security reasons, this isn't common. (If it were, most any other website could steal content from other sites you're logged into, such as your webmail or your bank!)
The only way around this is to proxy that data server-side where the cross-origin problem doesn't exist.
What it is the main purposes to fetch a different page into your page?
On another hand, did you try to use iframes?
https://www.w3schools.com/tags/tag_iframe.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
Note: In the end, you could fetch the page but you won't have control over js.