非统一 HTML 的 jQuery 解析答案

【问题标题】：jQuery Parsing of non-uniform HTML非统一 HTML 的 jQuery 解析
【发布时间】：2016-07-05 10:01:21
【问题描述】：

我的任务是从“错位”数据生成的静态 HTML 页面中解析数据。

HTML 的内容遵循以下模式：

<div class="product-detail">
    <h1>Product Name <span>Company</span></h1>
    <p>
        <strong>Description</strong>
        EZ use widget
    </p>
    <p>
        <strong>Location</strong>
        China
    </p>
    <p>
        <strong>Width</strong>
        10" <span>(26cm)</span>
        <strong>Height</strong>
        9"
    </p>
    <p>
        <strong>Category</strong>
        <a>Widget</a>
    </p>
</div>

“产品名称”和“公司”很简单

var productDetail = $('div.product-detail');

var data = {
    name: productDetail.children('h1').clone().children().remove().end().text(),
    company: productDetail.children('h1').children('span').text()
};

我的问题在于细节。描述名称总是在<strong> 标记中，但实际描述有时包含在其他标记中。此外，描述有时会共享一个<p> 标签（上面的宽度、高度），并且描述因产品而异。

我已经尝试了明显的嫌疑人

productDetails.contents().each( ... )

递归解析甚至是纯 DOM 操作，但最终会产生垃圾，尤其是在描述共享 <p> 标记的情况下。不幸的是，我的 jQuery 技能让我失望了。

在<strong> 之后立即获取带有文本（可能嵌入在标签中）以生成后续 JSON 对象的最简单方法是什么

{
  name: "Product Name",
  company: "Company",
  Description: "EZ use widget",
  Location: "China",
  Width: '10"',
  Height: '9"',
  Category: "Widget"
}

我认为我离问题太近了，错过了明显的答案。

【问题讨论】：

nextUntil 在这里可能有用。

标签： javascript jquery html-parsing cheerio

【解决方案1】：

jQuery .contents() 将返回一个 html 元素数组。

$(".product-detail > p:eq(2)").contents()

每个都有.textContent 和.nodeName 属性。

祝你好运，if-else 与确定对象组装之前的内容有关！

【讨论】：