Get text from a txt file in the url

Question

When I go to a url like this: http ://my.url.com/file.txt, the browser shows text.

I would like a simple javscript command that does the following:
1. go to the url
3. take the text that shows up on the screen
4. store it in a variable for further processing

so something like

var url = http: //my.url.com/file.txt;

//some code here that goes to the url

//some code that takes said info and does something like:

var fileInfo = ---content of file.txt---

Note that the info I seek from the txt file is in html tags

<p>Text I need in Variable</p>

Any assistance would be greatly appreciated!
Thank you!

Solution 1

Use the Fetch API.

Play with it at jsfiddle.net.

var url = 'https://fiddle.jshell.net/robots.txt';
var storedText;

fetch(url)
  .then(function(response) {
    response.text().then(function(text) {
      storedText = text;
      done();
    });
  });

function done() {
  document.getElementById('log').textContent =
    "Here's what I got! \n" + storedText;
}

Here's a smaller ES6 example that separates fetching from storing and showing off the result.

fetch('https://fiddle.jshell.net/robots.txt')
  .then((response) => response.text().then(yourCallback));

function yourCallback( retrievedText ) { /* . . . */ }

Adoption is already across the board.

You don't have to wait. Most people don't. You shouldn't.
GitHub provides a polyfill of those who can't upgrade.

What's better about fetch than XHR? ... Lots.

Solution 2

Make an AJAX call to the url. Here is using the jQuery library:

$.get( "http: //my.url.com/file.txt", function( data ) {
  var text = data;
});

To extract what you need from your text string in between the paragraph tags, try regex:

var pText = text.match(/<p>([^<]+)<\/p>/)[1];

Comments

[Gilles Quenot]

You makes assumptions: everyone use JQuery ?!

[comixninja]

You really want to use vanilla javascript? stackoverflow.com/questions/8567114/…

[Gilles Quenot]

There's some cases where you're stuck with vanilla JS ;)

[Baruch]

@ndcomix +1 for sassiness

[Gilles Quenot]

If you're a CasperJS dev, you play with what the remote website use. If there's no JQuery, no cigar. It's an example

[Gilles Quenot]

Disclaimer: Fetch support is at a fairly early stage, but progress is being made. It is turned on by default in Firefox 39 and above, and Chrome 42 and above.

[TylerY86]

For older browsers or people that refuse to update; github.github.io/fetch

[TylerY86]

Since before Febuary of 2015, we've been climbing out of the dark ages. davidwalsh.name/fetch gauntface.com/blog/2015/02/11/fetch-is-the-new-xhr

[TylerY86]

Disclaimer: Not supported in all browsers. Here's a polyfill. github.com/LuvDaSun/xhr-polyfill

[TylerY86]

That's a bit off topic, and this is too; you could scope and inject a support library... stackoverflow.com/questions/31566465/…

[TylerY86]

JQuery's ajax support is a better solution than old xhr... they handle the gotchas for you. github.com/jquery/jquery/blob/master/src/ajax/xhr.js Check out the commit history on that one!

[Aryeh K]

Thank you very much for your response, but this is the error I am getting when running this in a blank console: Fetch API cannot load http:// www.my-sample-url.com/file.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome://newtab' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. undefined:1 Uncaught (in promise) TypeError: Failed to fetch(…)

[TylerY86]

You're fetching from a modification to chrome://newtab? And you're trying to fetch an external resource... Hm. Try creating a Request instead of using the URL as a string parameter to fetch. Specify the .mode as 'no-cors'. In this state, it may not be possible to retrieve the text. You may need to ask this as a different question concerning chrome://newtab specifically.

[Dave Everitt]

Excellent example. I just made a bare-bones static site handler (didn't want all the overhead of a 'real' SSG) that pulls in .md files using fetch and converts them to HTML inside my static HTML pages on the fly. Now I can just git push and the site is updated on GitHub pages :-)