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?
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?
Share Improve this question edited May 23, 2017 at 12:13 CommunityBot 11 silver badge asked Aug 25, 2015 at 17:24 jackjack 2671 gold badge3 silver badges11 bronze badges 3- If you're on the client, you've got the native DOM API to do parsing and manipulation. If you're on the server, there are a number of DOM libraries available. As this amounts to a "remend a tool" question, I'm voting to close it as off-topic (#4). – zzzzBov Commented Aug 25, 2015 at 17:30
- @zzzzBov The question looks pletely on-topic to me. It shows what the OP wants, what they have tried, and why they are looking for alternatives. – Rob W Commented Aug 25, 2015 at 17:37
- 2 Don't parse HTML with regex – klenium Commented Aug 25, 2015 at 19:29
1 Answer
Reset to default 5As 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./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.