Split a image tag on html string

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

Smells like an XY problem... You probably want to use the DOM, not regex. — elclanrs, Jul 27 '14 at 06:11
since there can be any number of image tags so please give me some general solution — Bad Coder, Jul 27 '14 at 06:12
I think you need to explain what you're trying to accomplish. What's the end goal? Why do you need an array? What type of array is that? Array of strings? Array of DOM elements? As-is it is not even valid code. — elclanrs, Jul 27 '14 at 06:15
@elclanrs array is not necessarily you can save the value in some variable and overwrite it with it's new value when second image tag comes — Bad Coder, Jul 27 '14 at 06:20
@Fabricator thanks man would you give me some link where i can learn more about regex — Bad Coder, Jul 27 '14 at 06:26
if you just need to remove img tag, use .remove() function or if you want output as mentioned above first replace img tag with , and the get parent div inner html. — Vikram, Jul 27 '14 at 06:52
Here's a good summary of the use of Regex to parse HTML: http://stackoverflow.com/a/1732454/1896761 — Austin Mullins, Jul 27 '14 at 07:12
How is this not a duplicate of your own previous question: http://stackoverflow.com/questions/24963843/splitting-an-html-tags? — David Thomas, Jul 27 '14 at 14:12

score 1 · Answer 1 · answered Jul 27 '14 at 06:30

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.

@AustinMullins: Maybe, not sure what you mean, feel free to edit. — elclanrs, Jul 27 '14 at 07:09

score 1 · Accepted Answer · edited Jan 04 '23 at 15:22

1

why are you asking the same question multiple times?
Here is you answer

  $('#start').find('img').each(function(index){
    var split_text = $(this).html().split(/<img[^>]*>/)[index];
    alert(split_text);
  });

edited Jan 04 '23 at 15:22

MUHAMMAD ZAIN

23
9

answered Aug 01 '14 at 15:14

Split a image tag on html string

2 Answers2

Linked