javascript - 制作 HTML 字符串的数组集

Question

我从 API 响应中获取以下字符串。我必须将这个字符串转换为一组数组。文本和后面的图像应该是一组。图像后的文本应使用以下图像创建一个新组。问题是如何在 HTML 字符串上运行循环。

API 响应

<p>aaaaa</p>
<p><img src="img.jpg" alt="" width="369" height="224" /></p>
<p><img src="img.jpg"alt="" width="369" height="224" /></p>
<p>bbbb</p>
<p>bbbb</p>
<p><img src="img.jpg" /></p>
<p>ccc</p>"

预期输出:

[
  ['aaaaa', '<img src="img.jpg" alt="" width="369" height="224" />', '<img src="img.jpg"alt="" width="369" height="224" />'],
  ['bbbb', 'bbbb', '<img src="img.jpg" />'],
  ['ccc']
]

该函数将类似于

function makeHtmlSet(){
var htmlSet = []
 for(var i=0;i<?;i++){
   if(?.nodeType===Node.textNode){
      htmlSet = [];
      htmlSet.push(?);
   }
   else{
    htmlSet.push(?);
   }
 }
}

Answer 1

通常，您可以通过将基于文本的 HTML 传递给 jQuery 函数来使用 jQuery 来完成此操作 - 需要注意的是，您需要将其包装在人工父级中(div下面的代码)。

那么你的逻辑有点复杂，直到图像之后你才会生成一个新数组，并且两个相邻的文本节点被传递到同一个数组......所以需要一点逻辑。

总而言之，以下内容似乎可以满足您的需求。

var input = '<p>aaaaa</p>' +
'<p><img src="img.jpg" alt="" width="369" height="224" /></p>' + 
'<p><img src="img.jpg"alt="" width="369" height="224" /></p>' + 
'<p>bbbb</p>' + 
'<p>bbbb</p>' + 
'<p><img src="img.jpg" /></p>' + 
'<p>ccc</p>';

var $input = $("<div>" + input + "</div>");
var output = [];
var hasPassedImg = true
$("p",$input).each(function(){
  var hasImg = $(this).children("img").length>0
  if(hasImg){
     current.push($(this).html());
     hasPassedImg = true;
  }
  else{
     var text = $(this).text();
     if(hasPassedImg){
         current = [];
         output.push(current);
         hasPassedImg = false;
     }
     current.push(text);
  }
});

console.log(output);

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