jQuery 解析非统一 HTML

我的任务是从"放错位置"的数据生成的静态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"
}

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