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

【问题标题】：Extract specific HTML container from Javascript variable从 Javascript 变量中提取特定的 HTML 容器
【发布时间】：2020-05-02 17:44:38
【问题描述】：

如何从包含 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>。

【问题讨论】：

你引用了 jquery 吗？
@NithinChandran No. 试图避免它。这还有很多，jQuery 真的会减慢它的速度。这是一个备份，以防在返回的内容之间触发返回的提取。它是一种备份，但很重要。
使用document.querySelector('.content').outerHTML 有帮助吗？
“包括它的<section>”是什么意思。该部分内的所有内容？
包容意味着他也需要section标签的标记

标签： javascript variables extract innerhtml

【解决方案1】：

使用DOMParser。

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

【讨论】：

【解决方案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)

【讨论】：

【解决方案3】：

这应该可行！

  var data= $(html);

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

【讨论】：

假设 jQuery

【解决方案4】：

这应该可以工作

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

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

【讨论】：