Stripe texts out of string

Question

I want to strip the <img> tags and it's contents out of my string that is returned from the database.

Example string

//I want to retrive dummy texts from my string.
var string = "<img src='test.jpg'/>dummy texts <img src='text.jpg'/> dummby text dummy texts";

I have tried

if (string.indexOf('<img') != -1) {
    var newString = $(string).filter(function() {
        return this.tagName != 'img';
    }).text();
}

However, my DB has crappy data and sometimes return

//There is no closure for image tag. 
var string = "<img src='test.jpg'/>dummy texts <img src='text.jpg'/> dummby text dummy texts";

and my code would strip the entire string.

The image tag positions vary.

How do I strip the <img> tags efficiently?

If possible, it would be better to strip these tags from the string in your server side code (php, .net or whatever you are using). — 3dgoo, Dec 07 '12 at 01:18

adeneo · Answer 1 · 2012-12-07T00:55:33.783

2

var str  = "<img src='test.jpg'>dummy texts <img src='text.jpg'>",
    text = $('<div />').append(str).remove('img').text();

FIDDLE

edited Dec 07 '12 at 00:55

answered Dec 07 '12 at 00:49

adeneo

312,895
29
395
388

If you're returning `text()` you don't need to strip the images. This will strip all other HTML, as well. – Chris Heald Dec 07 '12 at 01:09
thanks for the help. the append works but Brian's answer seems less codes for me. +1 though. – FlyingCat Dec 07 '12 at 01:27

score 1 · Answer 2 · edited May 23 '17 at 11:55

1

Well, the correct answer is that you don't parse HTML with regex. You need to use a proper XML parser. Fortunately, your browser is one! You could try using jQuery's document fragments:

function stripImages(markup) {
  var fragment = $("<body></body>").html(markup);
  fragment.find("img").remove();
  return fragment.html();
}

var s = "<img src='test.jpg'/>dummy texts <img src='text.jpg'/> dummby text dummy texts"
stripImages(s);

This'll create a document fragment, let you strip the image tags, and then get the sanitized HTML back.

edited May 23 '17 at 11:55

Community

1
1

answered Dec 07 '12 at 00:44

Chris Heald

61,439
10
123
137

Thanks for all the edits you have done. Brian's codes create less codes with regex. +1 though. – FlyingCat Dec 07 '12 at 01:29
If this is to secure images from being passed, see my comment on Brian's code. Regex is not a viable solution for securing content from having HTML injected. – Chris Heald Dec 07 '12 at 07:05

score 1 · Answer 3 · answered Dec 07 '12 at 00:52

1

What worked for me is wrapping the string in a DOM Element, which you could create on the fly like:

var el = $('<div>');
el.html("<img src='test.jpg'>dummy texts <img src='text.jpg'> dummby text dummy texts");
el.find('img').remove();
console.log(el.html());

then simply search and remove specific elements (images or whatever)

answered Dec 07 '12 at 00:52

gherkins

14,603
6
44
70

Thanks for the help. your codes work but I would prefer not wrapping additional div ii my codes +1 though – FlyingCat Dec 07 '12 at 01:28

score 1 · Accepted Answer · answered Dec 07 '12 at 01:16

1

Can also do it without appending first.

var str = "<img src='test.jpg'/>dummy texts <img src='text.jpg'/> dummby text dummy texts";
str = str.replace(/<img[^>]+>/g, '');

answered Dec 07 '12 at 01:16

Brian Cray

1,277
1
7
19

Thanks for the help. your codes work for me. plus simple with regex. – FlyingCat Dec 07 '12 at 01:27
This is defeatable via `<img src="http://www.gravatar.com/avatar/be6be2d78e54f776ae254b08cfd13d70?s=32&d=identicon&r=PG" />`. – Chris Heald Dec 07 '12 at 07:03
Yea it is, but it also sounds like he's in control of the data source – Brian Cray Dec 07 '12 at 15:24

Stripe texts out of string

4 Answers4