使用正则表达式查找没有alt属性的img标签

时间:2010-10-27 09:59:21

标签: regex visual-studio find accessibility standards

我正在浏览一个大型网站(1600多页),使其通过优先级1 W3C WAI。因此,像图片标签之类的东西需要具有alt属性。

在没有alt属性的情况下查找img标签的正则表达式是什么?如果可能的话,我会用一些解释来解决其他问题。

我在Visual Web Developer 2008办公室。编辑>>查找对话可以使用正则表达式。

9 个答案:

答案 0 :(得分:31)

以Mr.Black和Roberts126为基础回答:

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

这将匹配代码中任何位置的img标记,该代码没有alt标记或alt标记,后面没有=“”或=''(即无效的alt标记)。

打破它:

(          : 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

如果您的代码编辑器允许搜索和替换Regex,您可以将其与替换字符串结合使用:

$1 alt=""$3

要查找任何无alt标记的img标记,并使用空的alt标记附加它们。当对HTML电子邮件等使用间隔符或其他布局图像时,这非常有用。

答案 1 :(得分:16)

以下是我在自己的环境中尝试使用庞大的企业代码库并取得了一些成功(发现没有误报但肯定找到有效案例):

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

此搜索中发生了什么:

  1. 找到标签的开头
  2. 寻找缺少零个或多个不是结束括号的字符,同时......
  3. 检查是否缺少以“alt”开头的单词(“\ b”用于确保我们没有像类别值那样获得中间名称匹配),然后是“ =“,然后......
  4. 查找不是结束括号的零个或多个字符
  5. 找到结束括号
  6. 所以这将匹配:

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

    但它不会与这两者相匹配:

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

答案 2 :(得分:8)

这适用于Eclipse:

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

我也正在更新508节!

答案 3 :(得分:7)

这对我有用。

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

这匹配任何以<img开头且在alt属性之前不包含任意数量字符的字符串。它甚至适用于src="<?php echo $imagename; ?>"类型的属性。

答案 4 :(得分:1)

简单有效:

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

此正则表达式适用于缺少<img>属性的查找alt标记。

答案 5 :(得分:1)

使用以下正则表达式完全可以做到这一点:

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

寻找不存在的东西是很棘手的,但是我们可以通过寻找一个不以'a'开头或不以'a'开头的组来欺骗他们一个“ l”,依此类推。

答案 6 :(得分:0)

这真的很棘手,因为正则表达式主要是关于匹配那里的东西。通过环顾四处的技巧,你可以做一些事情,比如'找不到B之前/之后的A'等等。但我认为最实用的解决方案不会那样。

我的建议稍微依赖于您现有的代码而不是做太疯狂的事情,您可能需要对其进行微调,但我认为这是一个很好的镜头,如果您真的想使用RegEx搜索来解决您的问题

所以我建议找到所有img标签,可以(但不需要)拥有img-element的所有有效属性。这是否是您可以使用的方法,由您决定。

提案:

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

目前的限制是:

  1. 它希望您的属性值用双引号
  2. 分隔
  3. 它没有考虑可能的内联*事件属性,
  4. 找不到具有'非法'属性的img元素。

答案 7 :(得分:0)

我为此编写了一个不带正则表达式的简单代码

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

答案 8 :(得分:-1)

<img(?!(\n|.(?!\/>))*?alt)

<img - Find start of image tag
(?! - begin negative lookahead
( - begin group
\n|.(?!\/>) - Match either a new line or anything not followed by end of the tag
)*? - close group. Match zero or more (non-greedy)
alt - Match "alt" literally
) end of negative lookahead

这个在 vscode 中对我有用。它将突出显示所有没有 alt 属性的 img 标签的开头