javascript - 将一些html代码分解为对象数组

我正在尝试分析一些html代码并将其分成对象数组。

这是一些示例html代码：

<slide data-time=5>
  <div class="cds-block-title">Master Calendar</div>
  <div class="cds-block-content">iframe to master calendar</div>
</slide>

<slide data-time=5>
  <div class="cds-block-title">Weather</div>
  <div class="cds-block-content">iframe to master Weather App</div>
</slide>

我的目标是将其分解为类似于以下内容的对象：

[
   {
      "html":"<slide.....</slide>",
      "time":"5",
      "title":"Master Calendar",
      "content":"iframe...."
   },
   {
      "html":"<slide.....</slide>",
      "time":"5",
      "title":"Master Calendar",
      "content":"iframe...."
   }
]

我尝试了几种不同的方法。
使用Regex（这在我的测试中有效，但是当我将其投入生产时不起作用。.match停止按预期工作，我还阅读了几篇文章，指出使用regex解析html代码不是最佳方法）：

function splitSlidesHtml(html){
var html = '<slide data-time="5"><div class="cds-block-title">Activities & Sports</div><div class="cds-block-content">content</div></slide><slide data-time="5"><div class="cds-block-title">weather</div><div class="cds-block-content">content</div></slide>"';
  var slides = html.match(/<slide.*?>(.*?)<\/slide>/g);
  var slidesA = [];
  if (!slides) {
    slidesA.push({"html":html});
  } else {
    for (i in slides){
      var c = {};
      c.html = slides[i];
      c.time = slides[i].match(/(data-time=)(.*?)>/)[2].replace(/['"]+/g, '');  // extract the time, and replace any quotes that might be around it
      c.title = slides[i].match(/<div class="cds-block-title">(.*?)<\/div>/)[1];
      c.content = slides[i].match(/<div class="cds-block-content">(.*?)<\/div>/)[1];
      slidesA.push(c);
    }
  }
  return slidesA;
}  // end splitSlidesHtml

我也尝试过使用jQuery，这种方法行之有效，但是我对parseHTML的了解还不足以知道如何确保它在不同的幻灯片上不会出错。

var slides = $.parseHTML(html);
console.log(slides);
console.log(slides[0].innerHTML);
console.log(slides[0].outerHTML);

最佳答案

您可以使用$.parseHTML()将HTML字符串转换为DOM节点数组，然后在这些节点上循环以获取所需的信息。在这种情况下，.map()是一个很好的用法，因为您正在将每个节点映射到其他对象。

var html = '<slide data-time=5>\
  <div class="cds-block-title">Master Calendar</div>\
  <div class="cds-block-content">iframe to master calendar</div>\
</slide>\
<slide data-time=5>\
  <div class="cds-block-title">Weather</div>\
  <div class="cds-block-content">iframe to master Weather App</div>\
</slide>';

var slides = $($.parseHTML(html)).map(function () {
    return {
      // store the HTML
      html: this.outerHTML,
      // store the data-time attribute
      time: this.dataset.time,
      // store the title
      title: $('.cds-block-title', this).text(),
      // store the content
      content: $('.cds-block-content', this).text(),
    };
}).get();

console.log(slides);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>