从Javascript变量中提取特定的HTML容器

Question

如何从包含html内容的JS变量中提取特定html。

在下面的例子中，JS变量包含了从Fetch API请求中返回的全部html内容。我只想用类来提取该部分的内容。content.

变量

const aVariable = fetch(...etc.. etc.. // the returned value)

返回的值包含。

<section class="wrapper">
    blah blah blah
    <div>
        blah blah
    </div>
    <section class="content">
        It's the one that I want
        <div>
            Whoa whoa whoa yeah!
        </div>
    </section>
    blah blah
</section>

我只是想 content 但包括其 <section>.

Answer 1

使用 DOMParser.

var parser = new DOMParser();
var doc = parser.parseFromString(aVariable, "text/html");
var elm = doc.querySelector(".content");

Answer 2

您可以使用 DOMParser 界面

该 DOMParser 接口提供了将XML或HTML源码从一个字符串解析成DOM文档的能力。

const html = `<section class="wrapper">
    blah blah blah
    <div>
        blah blah
    </div>
    <section class="content">
        It's the one that I want
        <div>
            Whoa whoa whoa yeah!
        </div>
    </section>
    blah blah
</section>`


const domparser = new DOMParser()
const doc = domparser.parseFromString(html, 'text/html')

const elem = doc.querySelector('section.content')

console.log(elem.outerHTML)

Answer 3

这应该可以工作

  var data= $(html);

  var content= data.children('#content').html();

Answer 4

这应该可以工作

var all= new DOMParser().parseFromString(aContent) ;

var contentHtml = all.querySelector('.content').outerHTML