在Angular 7/Typescript中将HTML分配给字符串变量的情况下，我如何通过类名解析内部HTML

Question

如何按类名获取span的内部文本？这里的adr_address变量不是DOM元素，而是字符串。

var adr_address = '<span class="street-address">12 Stephenson Rd</span>, <span class="locality">Summertown</span>, <span class="region">TN</span> <span class="postal-code">38483-7005</span>, <span class="country-name">USA</span>';
var street-address = ??;
var locality = ??;
var region = ??;
var postal-code = ??;
var country-name = ??
console.log(street-address);
console.log(locality);
console.log(region);
console.log(postal-code);
console.log(country-name);

输出必须是这样的：

斯蒂芬森路12号

萨默敦

TX-

38483-7005

美国

Answer 1

您可以使用DOM Parser

const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
__ now you can use query selectors on this doc __

Answer 2

您可以使用@ViewChild，例如：

html:

<span #st class="street-address">12 Stephenson Rd</span>

ts:

@ViewChild('st') st;
ngAfterViewInit(): void {
console.log(this.st.nativeElement.innerHTML);

}

Answer 3

这对我来说终于奏效了：

var adr_address = '<span class="street-address">12 Stephenson Rd</span>, <span class="locality">Summertown</span>, <span class="region">TN</span> <span class="postal-code">38483-7005</span>, <span class="country-name">USA</span>';
const parser = new DOMParser();
const doc = parser.parseFromString(adr_address, 'text/html');
var locality = doc.getElementsByClassName('locality')[0].innerHTML.toString(); 
var street-address = doc.getElementsByClassName('street-address')[0].innerHTML.toString();
var region = doc.getElementsByClassName('region')[0].innerHTML.toString();
var postal-code = doc.getElementsByClassName('postal-code')[0].innerHTML.toString();