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>

Answer 2

正如您所描述的，您的api返回值是string，而html字符串以p作为父根。首先，您可以通过正则表达式删除<p>并替换函数。您可以按</p> delimeter将字符串拆分为数组。最后，您可以根据需要创建新的数组...。

在这里，我只针对固定字符串

var str = '<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>';

function makeHtmlSet(){
  var htmlSet = [];
  var reg = /<p>/g;
  var newStr = str.replace(reg, "");
  newStr = newStr.split('</p>');
  htmlSet.push([newStr[0].trim(),newStr[1].trim(),newStr[2].trim()]);
  htmlSet.push([newStr[3].trim(),newStr[4].trim(),newStr[5].trim()]);
  htmlSet.push([newStr[6].trim()]);
  return htmlSet;
}

console.log(makeHtmlSet());

Answer 3

Simply You can use DOMParser to parse the string to DOM Document.It have the method parseFromString()

The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document.

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

var data='<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>'

function parseData(data){
    parser=new DOMParser();
    htmlDoc=parser.parseFromString(data, "text/html");
    var ptags = htmlDoc.getElementsByTagName("p");
    var output = [];
     var temp = [];
   
      $(ptags).each(function(index){
        if($(this).children("img").length>0){
          temp.push($(this).html());
       }
      else{
         var text = $(this).text();
         if(0==$(this).index() || $(this).prev('p').children("img").length>0){
	  	    temp=[];
          output.push(temp);  
       }
        temp.push(text);
      }
    });
    return output;
 }
console.log(parseData(data));

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

Answer 4

由于您的答复是一个字符串：创建一个隐藏的div：

<p id="demo" style="display:none">Demo div.</p>

将此div的innerHTML设置为字符串：

el = document.getElementById("demo")
el.innerHTML = str;

获取所有p个元素的列表，如下所示：

arr = el.querySelectorAll("p")

for(var i=0; i<arr.length; i++) {
    if(arr[i].firstChild.nodeName == "IMG") //do img stuff
    if(arr[i].firstChild.nodeName == "#text") //do text stuff
}

这应该回答您有关如何遍历HTML的问题。

您可以删除元素：

el.parentNode.removeChild(el);

将数组设置为HTML字符串

4 个答案: