如何使用cheerio解开子元素？答案

【问题标题】：How to unwrap child element using cheerio?如何使用cheerio解开子元素？
【发布时间】：2016-08-29 17:45:39
【问题描述】：

我正在使用 node.js。

我正在使用cheerio html 解析器来读取一个html 文档。

在这个例子中

 <div class="a b c">
      <a id="ddd"/>
      sample
 </div>

我试过了

  var cheerio = require('cheerio');
  var c$ = cheerio.load(/*html content*/);
  var cntext = c$('div').html();

cntext 包含所需的 div 及其所有子项。

如何删除 div 并只保留子节点？

提前致谢。

【问题讨论】：

标签： jquery node.js cheerio

【解决方案1】：

您需要选择div，为此依靠选择器方法，以及节点的特定属性来区分所需的div 与所有其他人。

$('div[class="a b c"]')

见https://github.com/cheeriojs/cheerio#selectors

您需要迭代所选 div 的直接子级，

$('div[class="a b c"]').children().each(fn)

见https://github.com/cheeriojs/cheerio#childrenselector

你需要移动在previsouly找到div之后找到的每个孩子

$('div[class="a b c"]').children().each(function(index, element){
  $(element).insertAfter($(element).parent());
})

见https://github.com/cheeriojs/cheerio#each-functionindex-element-

你需要删除空的div

$('div[class="a b c"]').remove()

见https://github.com/cheeriojs/cheerio#remove-selector-

匆匆写下，告诉我。

【讨论】：

如果insertAfter会颠倒孩子们的顺序，最好还是insertBefore。

【解决方案2】：

使用 jquery 的简单解决方案

您可以简单地将其转换为 html 元素，使用 $(HTML_SSTRING_VAR) 创建一个 html 并使用 .html() 函数来获取 innerHTML 就像在第一种情况下一样可以使用

var s=$( "#Div" ).html();
var temp=$(s);
alert(temp.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="Div">
 
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
  </div>

最简单的纯 javascript 解决方案

只需找到最后一次出现的“”之间的子字符串这将是假设本机 javscript 功能应该完美运行的内容。

Javscript Substring Function Documentation

var s=$( "#Div" ).html();
s = s.substring(s.indexOf(">")+1,s.lastIndexOf("<")-1);
alert(s);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="Div">

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
  </div>

另一种简单的方法

只需创建一个div，将html内容附加在其中，并在我们绕过要消除的div的过程中将所需内容作为子div的innerHTML访问

innerHTML Documentation

Children Documentation

var s=$( "#Div" ).html();
var temp = document.createElement('div');
temp.innerHTML = s;
alert(temp.children[0].innerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="Div">

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
  </div>

.unwrap()返回： jQuery 说明：删除父集的集合来自 DOM 的匹配元素，将匹配的元素留在它们的地方。 .unwrap() documentation

ALL IN ONE FIDDLE

【讨论】：