Remove image elements from string

Question

I have a string that contains HTML image elements that is stored in a var.

I want to remove the image elements from the string.

I have tried: var content = content.replace(/<img.+>/,"");

and: var content = content.find("img").remove(); but had no luck.

Can anyone help me out at all?

Thanks

Matt Coughlin · Accepted Answer · 2012-06-14T02:07:39.123

42

var content = content.replace(/<img[^>]*>/g,"");

[^>]* means any number of characters other than >. If you use .+ instead, if there are multiple tags the replace operation removes them all at once, including any content between them. Operations are greedy by default, meaning they use the largest possible valid match.

/g at the end means replace all occurrences (by default, it only removes the first occurrence).

edited Jun 14 '12 at 02:07

answered Jun 14 '12 at 01:08

Matt Coughlin

18,666
3
46
59

3

**Note:** Will not work if the `img` is like this: ``. A better way to do it is: `var content = $(content).find("img").remove().html();` – Derek 朕會功夫 Jun 14 '12 at 02:09
1

@Derek, it needs an `end()` function: `var content = $(content).find("img").remove().end().html();`, as per @Scott Evernden's answer. – Matt Coughlin Jun 14 '12 at 02:17

score 9 · Answer 2 · answered Jun 14 '12 at 01:03

9

$('<p>').html(content).find('img').remove().end().html()

answered Jun 14 '12 at 01:03

Scott Evernden

39,136
15
78
84

1

$('.selector').find('img').remove(); works as well. – Eryk Wróbel Jan 21 '20 at 09:51
This should be the accepted answer. Please do not use regex to parse html – naveen Dec 01 '21 at 05:36

score 7 · Answer 3 · edited Jun 20 '20 at 09:12

The following Regex should do the trick:

var content = content.replace(/<img[^>"']*((("[^"]*")|('[^']*'))[^"'>]*)*>/g,"");

It first matches the <img. Then [^>"']* matches any character except for >, " and ' any number of times. Then (("[^"]*")|('[^']*')) matches two " with any character in between (except " itself, which is this part [^"]*) or the same thing, but with two ' characters.

An example of this would be "asf<>!('" or 'akl>"<?'.

This is again followed by any character except for >, " and ' any number of times. The Regex concludes when it finds a > outside a set of single or double quotes.

This would then account for having > characters inside attribute strings, as pointed out by @Derek 朕會功夫 and would therefore match and remove all four image tags in the following test scenario:

<img src="blah.png" title=">:(" alt=">:)" /> Some text between <img src="blah.png" title="<img" /> More text between <img /><img src='asdf>' title="sf>">

This is of course inspired by @Matt Coughlin's answer.

powtac · Answer 4 · 2012-06-14T00:57:21.990

6

Use the text() function, it will remove all HTML tags!

var content = $("<p>"+content+"</p>").text();

edited Jun 14 '12 at 00:57

answered Jun 14 '12 at 00:48

powtac

40,542
28
115
170

Thanks - but I need to retain all the other HTML tags - just not img ones – MeltingDog Jun 14 '12 at 01:36

score 3 · Answer 5 · answered Sep 25 '13 at 02:38

3

I'm in IE right now...this worked great, but my tags come out in upper case (after using innerHTML, i think) ... so I added "i" to make it case insensitive. Now Chrome and IE are happy.

var content = content.replace(/<img[^>]*>/gi,"");

answered Sep 25 '13 at 02:38

cakidnyc

379
1
4
13

senfo · Answer 6 · 2012-06-14T01:13:08.907

1

Does this work for you?:

var content = content.replace(/<img[^>]*>/g, '')

edited Jun 14 '12 at 01:13

answered Jun 14 '12 at 00:59

senfo

28,488
15
76
106

3

It needs a //g or it only removes one img tag. – Matt Coughlin Jun 14 '12 at 01:09

Jason · Answer 7 · 2012-06-14T01:14:44.920

0

You could load the text as a DOM element, then use jQuery to find all images and remove them. I generally try to treat XML (html in this case) as XML and not try to parse through the strings.

var element = $('<p>My paragraph has images like this <img src="foo"/> and this <img src="bar"/></p>');

element.find('img').remove();

newText = element.html();

console.log(newText);

edited Jun 14 '12 at 01:14

answered Jun 14 '12 at 01:04

Jason

2,691
27
28

score 0 · Answer 8 · answered Jul 09 '18 at 14:19

0

To do this without regex or libraries (read jQuery), you could use DOMParser to parse your string, then use plain JS to do any manipulations and re-serialize to get back your string.

answered Jul 09 '18 at 14:19

pulsejet

1,101
13
27

Remove image elements from string

8 Answers8

The following Regex should do the trick:

Linked