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

Question

code:

<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>

output:

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

How can i achieve this ouput? what could be regex expression fot this image class in order to use split function(or any better way)?Please give me a demo

Answer 1

I'm not completely sure I understand your end goal, but if you want to remove the image from the HTML, you can use the DOM. First create a dummy element and set its innerHTML to the HTML string:

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

Now you got a div that contains your HTML structure as DOM elements . But, what you want is your div, not the dummy one:

var div = dummy.children[0]

Then loop the children, check if it's an image and remove it if so:

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

You can append the div to the DOM:

document.body.appendChild(div)

Or you can get back the HTML as a string and without the images:

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

Also note that your HTML is not valid, you didn't close the paragraph with </p> , and so the above won't work if it isn't valid.

Answer 2

why are you askying the same question multiple time?
Here is you answer

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


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