Menu
I want to know what could be the best way to get the title, keywords and content visible to the user from responseText using fetch api (Is there a way to not send cookies when making an XMLHttpRequest on the same origin?)
At the moment, I use regular expressions to get the title from the response text, for example:
var re_title = new RegExp("<title>[\n\r\s]*(.*)[\n\r\s]*</title>", "gmi");
var title = re_title.exec(responseText);
if (title)
title = title[1]
And to get the content in the keyword meta tag, i need to employ several regular expressions.
To get the content visible to the user, we don't need tags like script, div etc. also, we don't need the text between script tags. This is to get only the words which are meaningful in the body of the response.
I think (also as per various stackoverflow post) using regular expressions for this is just not the right approach. What could be the alternative?
495
We then fetch this request using fetch() , extract a blob from the response using Response. blob , create an object URL out of it using URL. createObjectURL , and display this in an <img> . Note that at the top of the fetch() block, we log the response headers to the console.
To get the status code of an HTTP request made with the fetch method, access the status property on the response object. The response. status property contains the HTTP status code of the response, e.g. 200 for a successful response or 500 for a server error.
As zzzzBov mentioned, you can use your browser's implementation of the DOMParser API to achieve this by parsing the response.text() of a fetch request. Here's an example that sends such a request for itself and parses the title, keywords, and body text:
<!DOCTYPE html>
<html>
<head>
<title>This is the page title</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web Help">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta charset="utf-8">
<script>
fetch("https://dl.dropboxusercontent.com/u/76726218/so.html")
.then(function(response) {
return (response.text());
})
.then(function(responseText) {
var parsedResponse = (new window.DOMParser()).parseFromString(responseText, "text/html");
document.getElementById("title").innerHTML = "Title: " + parsedResponse.title;
document.getElementById("keywords").innerHTML = "Keywords: " + parsedResponse.getElementsByName("keywords")[0].getAttribute("content");
document.getElementById("visibleText").innerHTML = "Visible Text: " + parsedResponse.getElementsByTagName("body")[0].textContent;
});
</script>
</head>
<body>
<div>This text is visible to the user.</div>
<div>So <i>is</i> <b>this</b>.</div>
<hr>
<b>Results:</b>
<ul id="results">
<li id="title"></li>
<li id="keywords"></li>
<li id="visibleText"></li>
</ul>
</body>
</html>I found Mozilla's documentation on the Fetch API, Using Fetch, and Fetch basic concepts helpful.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
