What is the easiest way to check if string contains any image tag?

Question

For example I have text:

"testestestestt testestestes <img src='image.jpg'>"

I want to write function which check if in string is img tag and return true

Easiest is regex, but it won't be very robust. – David Titarenco Jan 07 '13 at 19:50 — David Titarenco, Jan 07 '13 at 19:50

score 10 · Accepted Answer · answered Jan 07 '13 at 19:50

10

using regex:

"testestestestt testestestes <img src='image.jpg'>".match(/<img/)

answered Jan 07 '13 at 19:50

jcubic

61,973
54
229
402

how to check if string contains img tags with text – Prajapati Jigar Mar 17 '20 at 09:05
@PrajapatiJigar you mean alt attribute or text inside image? – jcubic Mar 17 '20 at 15:06

score 2 · Answer 2 · answered Jan 07 '13 at 19:52

2

var str = "testestestestt testestestes <img src='image.jpg'>";
var hasImg = !!$('<div />').html(str).find('img').length

answered Jan 07 '13 at 19:52

keune

5,779
4
34
50

This will try to load the image when you add it to the div. – gen_Eric Jan 07 '13 at 19:55
2

Although this will try to load the image when added to the div, it's the only answer that actually checks for the existence of an img element rather than just a string "img" or a variation of that. – sachleen Jan 07 '13 at 19:58

score 1 · Answer 3 · answered Jan 07 '13 at 21:41

Obviously, regular expressions are not recommend for parsing HTML, however, depending on the way you are using this, you may want to be assured that the img tag(s) have a corresponding ending tag. This is a slightly more robust regular expression for that:

if("<img>TestString</img>".match(/<img[^<]*>[\w\d]*<\/img>|<img[^\/]*\/>/i))
{
  alert('matched');
}
else
  alert('nope');

Matched Test Cases:

- blahsdkfajsldkfj<img blah src=\"\">iImmage123dfasdfsa</img>
- blahsdkfajsldkfj<img>iImmage123dfasdfsa</img>asdfas
- <img src=\"\"></img>
- <img></img>
- <img />

Unmatched Test Cases:

- <img (other regex would match this)
- <img>

Once you match it you can easily process it with an XML or HTML parser are then check if it has the src attribute etc.

Hmm this gives me always null for this kind of img tags: ``testestestestestes `` — tomekfranek, Jan 08 '13 at 17:44
@regedarek Make sure you don't have tags like this `` because if you do this `` there's no need for a closing tag `` — Alex W, Jan 08 '13 at 22:16

score 0 · Answer 4 · answered Jan 10 '21 at 15:04

Actually, given answers are fast, but they may face some special cases which mispredict img tags e.g. I posted my <picture> in <imgur>

`I posted my <picture> in <imgur>`.match(/<img/)
// ["<img", index: 25, ...]

also, there is a faster version of '<img' keyword search in a strings duo to this answer in modern browsers.

"testestestestt <img src='image.jpg'>".indexOf('<img') > -1

But the most reliable method is either you use a full img tag regex-matcher or let the browsers do things they've already done.

const hasImage = htmlString => {
  var div = document.createElement('div');
  div.innerHTML = htmlString

  return Boolean(div.querySelector('img'));
}

// tests
hasImage("testestestestt <img src='image.jpg'/>")
// true
hasImage("testestestestt <img src='image.jpg/>")
// false
hasImage("I posted my <picture> in <imgur>")
// false

hasImage function is highly inspired by this answer

What is the easiest way to check if string contains any image tag?

4 Answers4