在每个图像标签之前分割HTML [英] Splitting HTML before every image tag

问题描述

<div id="d">
  <p>one</p>
  <p>two</p>
  <img class="select image" src="something">
  <p>SPLIT HERE<p>
  <p>More Split</p>
  <img class="select image 2" src="something">
  <img class="select image 3" src="something">
  <p>more split here<p>
</div>

<script>
  // Pseudo Javascript:
  $('#d').find('img').each(function(){
    var split = split.images();
    alert(split);
  });
  alert(lastSplit);
</script>

之后的图片

split => <p>one</p><p>two</P>

第二张图片之后:

split => <p>SPLIT HERE<p>
         <p>More Split </p>

第三张图片之后

split => ""

如果最后一张图像后有任何文本，则应将其存储在最后一个分割中

If there is any text after last image it should store in last split

last split (if any) => <p>more split here<p>

我想使其通用，因为我不知道HTML页面中将有多少个图像标签.有人可以给我现场演示吗? 输出div应该是这样

I want to make it general, since I don't know how many image tags will be there in a HTML page. Anyone can give me a live demo? Output div should be like this

<div id=\"d\"<p>one</p><p>two</p>     select image     <p>SPLIT HERE<p><p>More Split </p>     select image 2     select image 3     <p>more split here<p></div>

推荐答案

var x = [],
    y = "",
    count = 0;


$("#d").children().each(function () {
    x.push($(this));
    if (this.tagName.toLowerCase() == "img") {
        count++;
        y += "Before Image " + count + ": ";

        for (var i = 0; i < x.length; i++) {
            y += " " + x[i].text().trim() + " ";
        }

        y += "\n";

        x = [];
    }
});

if (x.length > 0) {
    y += "Remaining text: ";
    for (var i = 0; i < x.length; i++) {
        y += "\n - " + x[i].html();
    }

}
console.log(y);

JS绑定

这篇关于在每个图像标签之前分割HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！