Как пройти HTML

Question

У меня есть переменная с HTML кодом:

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>'; 

Я хочу, чтобы пройти через переменную и сохранить этот раздел HTML в отдельной переменной:

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

Это то, что у меня до сих пор:

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; 
} 

Я уверен, что есть все виды вопросов с моей функцией, но я не могу получить к ним, потому что я не могу даже получить мимо второй линии. Я получаю сообщение об ошибке htmlDocument.getElementsByTagName не является функцией. Как перебирать HTML через div?

Обратите внимание: я не могу использовать JQuery из-за спецификации проекта.

EDIT:

Я получаю document is not defined когда я пытаюсь document.createElement('div') и DOMParser не определен, когда я пытаюсь создать DomParser. Я неправильно настроил класс? Это код для всего класса:

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

Вы можете создать элемент, а затем вставить в него эту строку как html.
Тогда вы можете запросить этот элемент для того, что вы ищете:

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

Вы также можете использовать DOMParser:

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