如何最简单地检查字符串是否包含任何图像标签？

Question

比如我有一段文字：

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

我想编写一个函数，检查字符串中是否有 img 标签，并返回 true。

- tomekfranek

---

最简单的方法是使用正则表达式，但它可能不够健壮。 - David Titarenco

Answer 1

使用正则表达式：

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

- jcubic

---

如何检查字符串是否包含带有文本的img标签 - Prajapati Jigar

@PrajapatiJigar 你是指图片的alt属性还是图片内部的文本？ - jcubic

Answer 2

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

- keune

---

当您将图像添加到div时，它将尝试加载该图像。 - gen_Eric

虽然将其添加到div时会尝试加载图像，但这是仅实际检查图像元素的存在而不仅仅是一个字符串“img”或其变体的唯一答案。 - sachleen

Answer 3

显然，正则表达式不推荐用于解析HTML，但是根据您使用的方式，您可能希望确保img标签具有相应的结束标签。以下是一个稍微更健壮的正则表达式：

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

匹配的测试用例：

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

无法匹配的测试用例：

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

一旦匹配成功，您可以使用XML或HTML解析器轻松处理它，然后检查它是否具有src属性等。

- Alex W

---

这让我总是得到这种img标签的null值：testestestestestes <img src="http://i.imgur.com/0kZ5U.png" /> - tomekfranek

@regedarek 请确保您不会像这样使用标签 <img src=".." /></img> ，因为如果您这样使用 <img /> ，就不需要闭合标签 </img>。 - Alex W

Answer 4

实际上，给出的答案很快，但它们可能会遇到一些特殊情况，导致误判img标签，例如我在<imgur>上发布了我的<picture>

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

此外，在现代浏览器中，由于这个答案，字符串中的“<img”关键字搜索有更快的版本。

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

但最可靠的方法是使用完整的img标签正则表达式匹配器，或让浏览器完成它们已经做过的事情。

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 函数的灵感来自于 这个答案

- amirhe