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, ...]

此外，由于现代浏览器中的 this answer，在字符串中提供了更快的 '

"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 函数的灵感来自于 this answer

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

4 个答案: