res.text() is not a function

Question

I have a simple html string like '

`hello world!!!!!`

'. I want to convert it to text but I am getting error like .text is not a function

My main purpose is to convert url into html. This is my code

      axios({
            method: 'get',
            url: url,
            headers:{
                "Content-Type":"text/html"
            },
        }).then(async (res) => {     
                const html = await res.data.text();
                console.log('html:', html);
        }).catch((e) => {
            console.log('e: ', e);
        })

I consoled res.data and I got html string but I am not able to convert it to text. i tried to put hardcoded html string to .text() but I am getting the same error that .text is not a function

CertainPerformance · Answer

If you're looking to get out of it only hello world!!!!!, then use DOMParser to turn it into a document, then get the document's text content.

axios(url)
  .then((res) => {     
    const htmlText = res.data;
    const doc = new DOMParser().parseFromString(htmlText, 'text/html');
    const plainTextContent = doc.body.textContent.trim();
    // use plainTextContent
  }).catch((e) => {
    console.log('e: ', e);
  });

user2Kb1 · Answer

If you specify the responseType in your request options, you can directly receive an HTML document without having to worry about parsing it

// just an example HTML page
const url = "https://jsonplaceholder.typicode.com/index.html";

axios.get(url, { responseType: "document" }).then(({ data }) => {
  // data is an HTML document
  const title = data.querySelector("h1").textContent;
  console.log("title:", title);
});

This is possible because Axios (when run in the browser) uses XMLHttpRequest which automatically supports rich (parsed) response types.

The Fetch API which is used in the post you linked to unfortunately does not support such a convenience and the response must be parsed.

res.text() is not a function

2 Answers