6

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?

Community
  • 1
  • 1
jack
  • 227
  • 1
  • 3
  • 11
  • 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 "recommend a tool" question, I'm voting to close it as [off-topic (#4)](http://stackoverflow.com/help/on-topic). – zzzzBov Aug 25 '15 at 17:30
  • @zzzzBov The question looks completely on-topic to me. It shows what the OP wants, what they have tried, and why they are looking for alternatives. – Rob W Aug 25 '15 at 17:37
  • 2
    [Don't parse HTML with regex](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) – klenium Aug 25 '15 at 19:29

1 Answers1

4

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.

Community
  • 1
  • 1
rphv
  • 5,409
  • 3
  • 29
  • 47
  • thanks rphv! that's very nice but is responseXML available as a result of fetch api too? – jack Aug 26 '15 at 08:29
  • also can you please have a look at http://stackoverflow.com/questions/32212499/how-to-evaluate-http-response-received-in-fetch-api?noredirect=1#comment52309600_32212499 . thanks – jack Aug 26 '15 at 08:30
  • Use `.response`, not `.responseXML`. The document is a HTML document, not necessarily a well-formed XML document. – Rob W Aug 26 '15 at 16:59
  • Clearly I missed the part about the fetch API - I updated the answer to use this new technology. – rphv Aug 26 '15 at 17:16
  • do you think replacing parsedResponse.getElementsByTagName("body")[0].textContent with parsedResponse.getElementsByTagName("body")[0].innerText would yied in better results? – jack Aug 27 '15 at 06:26