Question

我正在尝试分析一些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停止按预期工作，我还阅读了一些帖子，说明使用正则表达式来解析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);

Answer 1

您可以使用$.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>

Answer 2

这是我最终提出的。我在地图工作方面遇到了麻烦，无法正确地计算时间。

var html = sheetData['values'][prop]['html'];        
var parsed = $.parseHTML(html);
var isSlide = true;
for (n in parsed){
  var cur = parsed[n];
  if (cur.nodeName == "SLIDE"){
  var curSlide = {
      html: cur.outerHTML, // store the HTML
      time:  cur.dataset.time, // store the data-time attribute
      title: $('.cds-block-title', cur).html(), // store the title
      content: $('.cds-block-content', cur).html(),  // store the content
    };
  } else {
    isSlide = false;
  }
}

将一些HTML代码分解为对象数组

2 个答案: