在 html 字符串上拆分图像标签

Question

代码：

<div id="start">    
    <p>"hi split html string"<p><br>"now"
    <img class="image1" src="some src" master_src="some src" master_w="400" master_h="320">
    "second tag is coming"<br><img class="image2" src="some src" master_src="some src" master_w="400" master_h="320"><h1>end here</h1>
</div>

输出：

<p>"hi split html string"<p><br>"now" ,   "second tag is coming"<br> , <h1>end here</h1>

我怎样才能实现这个输出？为了使用拆分功能（或任何更好的方法），这个图像类的正则表达式可能是什么？请给我一个演示

Answer 1

你为什么要多次问同一个问题？
这是你的答案

  $('#start').find('img').each(function(index){


    var split_text = $(this).html().split(/<img[^>]*>/)[index];
    alert(split_text)
    });

Answer 2

我不完全确定我理解您的最终目标，但如果您想从 HTML 中删除图像，您可以使用 DOM。首先创建一个虚拟元素并将其 innerHTML 设置为 HTML 字符串：

var dummy = document.createElement('div')
dummy.innerHTML = html

现在你得到了一个 div，其中包含你的 HTML 结构作为 DOM 元素。但是，你想要的是你的 div，而不是虚拟的：

var div = dummy.children[0]

然后循环孩子，检查它是否是图像，如果是则将其删除：

for (var i=0; i<div.children.length; i++) {
  var child = div.children[i]
  if (child.tagName == 'IMG') {
    div.removeChild(child)
  }
}

您可以将 div 附加到 DOM：

document.body.appendChild(div)

或者您可以将 HTML 作为字符串取回，而无需图像：

div.innerHTML
//^ <p>"hi split html string"</p><br>"now""second tag is coming"<br><h1>end here</h1>

另请注意，您的 HTML 无效，您没有使用 </p> 关闭段落，因此如果无效，上述内容将不起作用。