2015-08-25 2 views
5

Ich möchte wissen, was der beste Weg sein könnte, den Titel, Keywords und Inhalt für den Benutzer sichtbar von response erhalten unter Verwendung holen api (Is there a way to not send cookies when making an XMLHttpRequest on the same origin?)API Fetch: Erhalten Sie Titel, Keywords und Textkörper von http-Antwort

im Moment benutze ich reguläre Ausdrücke den Titel aus dem Antworttext zu erhalten, zum Beispiel:

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] 

und den Inhalt im Keyword-Meta-Tag zu bekommen, muß ich mehr regulären Ausdrücke verwenden.

Um den Inhalt für den Benutzer sichtbar zu machen, benötigen wir keine Tags wie Script, Div etc. Auch brauchen wir den Text zwischen den Script Tags nicht. Dies ist nur um die Wörter zu erhalten, die im Körper der Antwort bedeutungsvoll sind.

Ich denke (auch nach verschiedenen Stackoverflow-Post) mit regulären Ausdrücken dafür ist einfach nicht der richtige Ansatz. Was könnte die Alternative sein?

+0

Wenn Sie auf dem Client sind, haben Sie die native DOM-API zum Parsen und Manipulieren. Wenn Sie sich auf dem Server befinden, stehen eine Reihe von DOM-Bibliotheken zur Verfügung. Da es sich um eine Frage "Werkzeug empfehlen" handelt, stimme ich ab, sie als [Off-Topic (# 4)] zu schließen (http://stackoverflow.com/help/on-topic). – zzzzBov

+0

@zzzzBov Die Frage sieht für mich völlig zum Thema aus. Es zeigt, was das OP will, was sie versucht haben und warum sie nach Alternativen suchen. –

+2

[HTML nicht mit Regex analysieren] (http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) – klenium

Antwort

2

Wie zzzzBov erwähnt, können Sie Ihren Browser-Implementierung der DOMParser API verwenden, um dies zu erreichen, indem die response.text() eines fetch Anfrage Parsen. Hier ist ein Beispiel, das einen solchen Antrag für sich selbst sendet und analysiert den Titel, Keywords und Textkörper:

<!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>

ich Mozilla-Dokumentation auf der Fetch API, Using Fetch und Fetch basic concepts hilfreich.

+0

danke rphv! das ist sehr nett, aber ist ResponseXML als Resultat von fetch api auch verfügbar? – jack

+0

auch können Sie bitte einen Blick auf http://stackoverflow.com/questions/32212499/how-to-evaluate-http-response-received-in-fetch-api?noredirect=1#comment52309600_32212499. Danke – jack

+0

Verwenden Sie '.response', nicht' .responseXML'. Das Dokument ist ein HTML-Dokument, nicht unbedingt ein wohlgeformtes XML-Dokument. –