比如我有一段文字:
"testestestestt testestestes <img src='image.jpg'>"
我想编写一个函数,检查字符串中是否有
img
标签,并返回 true
。比如我有一段文字:
"testestestestt testestestes <img src='image.jpg'>"
img
标签,并返回 true
。使用正则表达式:
"testestestestt testestestes <img src='image.jpg'>".match(/<img/)
var str = "testestestestt testestestes <img src='image.jpg'>";
var hasImg = !!$('<div />').html(str).find('img').length
显然,正则表达式不推荐用于解析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
属性等。
testestestestestes <img src="http://i.imgur.com/0kZ5U.png" />
- tomekfranek<img src=".." /></img>
,因为如果您这样使用 <img />
,就不需要闭合标签 </img>
。 - Alex W实际上,给出的答案很快,但它们可能会遇到一些特殊情况,导致误判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
函数的灵感来自于 这个答案