How to get text from url in javascript

Question

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

Nội dung chính Show

Use the Fetch API.
Get the Text of a Link element using JavaScript #
How to get the URL string in JavaScript?
How do I open a text file in JavaScript?
How do you find a link in HTML?
How do you add a link in JavaScript?

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!

asked Sep 28, 2016 at 21:33

4

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.

answered Sep 28, 2016 at 21:43

TylerY86TylerY86

3,65914 silver badges28 bronze badges

5

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];

answered Sep 28, 2016 at 21:36

comixninjacomixninja

7486 silver badges16 bronze badges

7

Just use jquery. It's easy fun and extensible. Don't try bizzare uses. Be sure all the time to be compatible through all the browser. If you copy this and run it under a local or remote webserver will work like a charm. Cheers.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.ajax({url: "test.txt", success: function(result){
            $("#div1").html(result);
        }});
    });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

answered Sep 28, 2016 at 21:48

Get the Text of a Link element using JavaScript #

Use the textContent property to get the text of a link element, e.g. const text = link.textContent. The textContent property will return the text content of the <a> element and its descendants. If the element is empty, an empty string is returned.

Here is the HTML for the examples in this article.

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <a id="link" href="https://example.com"
      >Visit <span style="background-color: lightpink">example.com</span></a
    >

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

Copied!
const link = document.getElementById('link');

const text1 = link.textContent;
// 👇️ Visit example.com
console.log(text1);

const text2 = link.innerText;
// 👇️ Visit example.com
console.log(text2);

We used the textContent property to get the text content of the link and its descendants.

The property returns the concatenation of the text content of every child node, excluding comments.

If the anchor element were empty, the property would return an empty string.

You might get leading or trailing spaces when using textContent depending on the structure of your HTML. If you need to remove any leading or trailing spaces, use the trim() method.

Copied!
const link = document.getElementById('link');

const text1 = link.textContent.trim();
// 👇️ Visit example.com
console.log(text1);

The code snippet also showed that we can use the innerText property to get the text content of an element and its descendants.

Copied!
const link = document.getElementById('link');

const text2 = link.innerText;
// 👇️ Visit example.com
console.log(text2);

However, there are some important differences between the textContent and innerText properties:

textContent gets the content of all elements, including script and style elements, whereas innerText only gets the content of "human-readable" elements.
innerText is aware of styling and does not return the text of hidden elements, whereas textContent does not take styles into consideration.
using textContent can prevent cross-site scripting attacks.

Because innerText takes CSS styles into account, when the property is accessed, a reflow is triggered to ensure the styles are up-to-date.

Reflows can be expensive and should be avoided when possible.

When you use textContent and innerText to set the element's text content, the element's child nodes get removed.

When using the textContent and innerText properties to update the text content of the element, the child nodes of the element get replaced with a single text node with the provided string value.

If you need to update the text content of the link, use the insertAdjacentText method instead.

Copied!
const link = document.getElementById('link');

// ✅ Insert text into link element
link.insertAdjacentText('beforeend', 'My extra text');

// ✅ Insert HTML into link element
link.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: lime">My extra HTML</span>',
);

The insertAdjacentText method does not remove the child nodes of the element it was called on.

The method takes the following 2 parameters:

position - the position relative to the element of where the text should be inserted. Can be one of the following 4:

beforebegin - before the element itself.
afterbegin - just inside the element, before its first child.
beforeend - just inside the element, after its last child.
afterend - after the element itself.

data - the string from which to create a new text node to insert at the given position.

In the example, we added a string inside of the link, after its last child, however you can update the first parameter of the method depending on your use case.

The example also shows how to use the insertAdjacentHTML method to insert HTML into the anchor element.

The insertAdjacentHTML method takes the same first parameter as insertAdjacentText - the position.

Copied!
const link = document.getElementById('link');


link.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: lime">My extra HTML</span>',
);

Note that you shouldn't insert user generated content as HTML without escaping it.

This would leave you vulnerable to cross-site scripting attacks.

How to get the URL string in JavaScript?

Answer: Use the window. location. href Property location. href property to get the entire URL of the current page which includes host name, query string, fragment identifier, etc. The following example will display the current url of the page on click of the button.