[ACCEPTED]-Using regular expressions to find img tags without an alt attribute-standards

Building on Mr.Black and Roberts126 answers:

/(<img(?!.*?alt=(['"]).*?\2)[^>]*)(>)/

This 10 will match an img tag anywhere in the code 9 which either has no alt tag or an alt tag 8 which is not followed by ="" or ='' (i.e. invalid 7 alt tags).

Breaking it down:

(          : open capturing group
<img       : match the opening of an img tag
(?!        : open negative look-ahead
.*?        : lazy some or none to match any character
alt=(['"]) : match an 'alt' attribute followed by ' or " (and remember which for later)
.*?        : lazy some or none to match the value of the 'alt' attribute
\2)        : back-reference to the ' or " matched earlier
[^>]*      : match anything following the alt tag up to the closing '>' of the img tag
)          : close capturing group
(>)        : match the closing '>' of the img tag

If your code 6 editor allows search and replace by Regex 5 you can use this in combination with the 4 replace string:

$1 alt=""$3

To find any alt-less img 3 tags and append them with an empty alt tag. This 2 is useful when using spacers or other layout 1 images for HTML emails and the like.

Here is what I just tried in my own environment 5 with a massive enterprise code base with 4 some good success (found no false positives 3 but definitely found valid cases):

<img(?![^>]*\balt=)[^>]*?>

What's 2 going on in this search:

1. find the opening of the tag
2. look for the absence of zero or more characters that are not the closing bracket while also …
3. Checking for the absence of of a word that begins with "alt" ("\b" is there for making sure we don't get a mid-word name match on something like a class value) and is followed by "=", then …
4. look for zero or more characters that are not the closing bracket
5. find the closing bracket

So this will match:

<img src="foo.jpg" class="baltic" />

But 1 it won't match either of these:

<img src="foo.jpg" class="baltic" alt="" />
<img src="foo.jpg" alt="I have a value.">

This works in Eclipse:

<img(?!.*alt).*?>

I'm updating for Section 1 508 too!

This worked for me.

^<img(?!.*alt).*$

This matches any string 3 beginning with <img that doesn't contain any 2 number of characters before an alt attribute. It 1 even works for src="<?php echo $imagename; ?>" type of attributes.

This is perfectly possible with following 5 regEx:

<img([^a]|a[^l]|al[^t]|alt[^=])*?/>

Looking for something that isn't there, is 4 rather tricky, but we can trick them back, by 3 looking for a group that doesn't start with 2 'a', or an 'a' that doesn't get followed 1 by an 'l' and so on.

This is really tricky, because regular expressions 15 are mostly about matching something that 14 is there. With look-around trickery, you 13 can do things like 'find A that is not preceded/followed 12 by B', etc. But I think the most pragmatic 11 solution for you wouldn't be that.

My proposal 10 relies a little bit on your existing code 9 not doing too crazy things, and you might 8 have to fine-tune it, but I think it's a 7 good shot, if you really want to use a RegEx-search 6 for your problem.

So what I suggest would 5 be to find all img tags, that can (but don't 4 need to) have all valid attributes for an 3 img-element. Whether that is an approach 2 you can work with is for you to decide.

Proposal:

/<img\s*((src|align|border|height|hspace|ismap|longdesc|usemap|vspace|width|class|dir|lang|style|title|id)="[^"]"\s*)*\s*\/?>/

The 1 current limitations are:

1. It expects your attribute values to be delimited by double quotes,
2. It doesn't take into account possible inline on*Event attributes,
3. It doesn't find img elements with 'illegal' attributes.

Simple and effective:

<img((?!\salt=).)*?

This regex works for 1 find <img> tags missing the alt attribute.

I wrote a simple code for this without Regex

let arr = []
$('img')
.filter(function() {
  arr.push(this.alt)
})
document.write(arr.filter(a=>!a).length + ' img without alt tag')

0