javascript - 检查字符串是否包含任何图像标签的最简单方法是什么？

Question

例如我有文字：

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

我想编写检查字符串是否为img标签并返回的函数true

Answer 1

使用正则表达式：

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

Answer 2

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

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属性等。

Answer 4

实际上，给出的答案很快，但他们可能会面临一些错误预测的特殊情况，img tags例如I posted my <picture> in <imgur>

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

此外，在现代浏览器中，与此答案相对应的字符串中有更快的“<img”关键字搜索版本。

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

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

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函数深受这个答案的启发