Wie zu durchqueren HTML

Question

ich eine Variable mit dem HTML-Code haben:

let htmlDocument = '<div id="buildings-wrapper"> \ 
    <div id="building-info"> \ 
    <h2><span class="field-content">Britney Spears' House</span></h2> \ 
    <div class="building-field"> \ 
    <div class="field-content">9999 Hollywood Blvd</div> \ 
    </div> \ 
    <div class="building-field"> \ 
    <div class="field-content">Building Hours: Mon. 07:00-23:00 Tue.-Fri. 06:30-22:00, Sat. 07:30-18:00, Sun. 12:00-18:00 Holidays - Closed</div> \ 
    </div> \ 
    <div class="building-field"> \ 
    <div class="field-content"><a href="http://www.britneyspears.com">Locate on the stars map</a></div> \ 
    </div> \ 
    </div> \ 
    <div id="building-image"> \ 
    <div class="field-content"><img src="../../../../ssc.adm.britneyspears.com/classroomservices/image/viewimage?userEvent=ShowBuildingImage&amp;buildingID=britneyspears" alt="Image of BritneySpears"></div> \ 
     </div> \ 
     </div>'; 

Ich möchte die Variable zu durchlaufen und diesen Abschnitt von HTML speichern in einer separaten Variable:

<div class="field-content">9999 Hollywood Blvd</div> 

Dies ist, was ich habe bisher:

public traverseHTML(htmlDocument: any): any { 
    let htmlBlock: any; 
    let divs: any = htmlDocument.getElementsByTagName('div'); 
    for (var i = 0; i < divs.length; i++) { 
     if (divs[i].getAttribute("id") == "field-content") { 
      htmlBlock = divs[i]; 
     } 
    } 
    return htmlBlock; 
} 

ich bin sicher, es gibt alle Arten von Problemen mit meiner Funktion aber ich kann nicht um sie zu bekommen, weil ich nicht einmal bekommen nach der zweiten Zeile. Ich bekomme eine Fehlermeldung, dass htmlDocument.getElementsByTagName keine Funktion ist. Wie wiederhole ich den HTML-Code durch div?

Bitte beachten Sie, ich kann nicht JQuery verwenden wegen Projektdaten.

EDIT:

Ich erhalte document is not defined wenn ich document.createElement('div') und DOMParser versuchen nicht definiert ist, wenn ich versuche, eine DOMParser zu erstellen. Richte ich die Klasse falsch ein? Dies ist der Code für die gesamte Klasse:

import parse5 = require('parse5'); 
import {ASTNode} from 'parse5'; 



export default class DSController { 
//private parser: DOMParser; 

constructor() { 
    //this.parser = new DOMParser(); 
} 

public traverseHTML(htmlDocument: any): any { 
    let parser = new DOMParser(); 
    let parsed: any = parser.parseFromString(htmlDocument, "text/html"); 
    let selectParsed: any = parsed.querySelectorAll('field-content')[1]; 
    console.log(selectParsed); 

    return selectParsed; 

    /* let element = document.createElement("div"); 
    element.innerHTML = htmlDocument; 
    console.log(element.querySelectorAll(".field-content")[1]); // <div class="field-content">9999 Hollywood Blvd</div> 
    */ 
} 




public parseHTML(): any { 

    //let document: parse5.ASTNode; 
    return; 
} 
} 

Answer 1

Sie können ein Element erstellen und dann diese Zeichenfolge als HTML einfügen.
Dann können Sie dieses Element Abfrage für das, was Sie suchen:

let htmlDocument = '<div id="buildings-wrapper"> \ 
    <div id="building-info"> \ 
    <h2><span class="field-content">Britney Spears House</span></h2> \ 
    <div class="building-field"> \ 
    <div class="field-content">9999 Hollywood Blvd</div> \ 
    </div> \ 
    <div class="building-field"> \ 
    <div class="field-content">Building Hours: Mon. 07:00-23:00 Tue.-Fri. 06:30-22:00, Sat. 07:30-18:00, Sun. 12:00-18:00 Holidays - Closed</div> \ 
    </div> \ 
    <div class="building-field"> \ 
    <div class="field-content"><a href="http://www.britneyspears.com">Locate on the stars map</a></div> \ 
    </div> \ 
    </div> \ 
    <div id="building-image"> \ 
    <div class="field-content"><img src="../../../../ssc.adm.britneyspears.com/classroomservices/image/viewimage?userEvent=ShowBuildingImage&amp;buildingID=britneyspears" alt="Image of BritneySpears"></div> \ 
     </div> \ 
     </div>'; 

let element = document.createElement("div"); 
element.innerHTML = htmlDocument; 

console.log(element.querySelectorAll(".field-content")[1]); // <div class="field-content">9999 Hollywood Blvd</div> 

(code in playground)

Answer 2

Sie auch DOMParser verwenden können:

new DOMParser().parseFromString(htmlDocument, "text/html") 
    .querySelectorAll('.field_content)[1]