在ng-if中使用RegExp未达预期效果，请求技术支持

我看到你在AngularJS的ng-if指令里尝试用正则表达式判断文件名是否为图片格式时遇到了问题，咱们来拆解问题并给出修复方案~

你的代码存在两个关键问题 #

• 正则表达式的.未转义：在正则中，.是匹配任意单个字符的通配符，你写的/.png|.jpg|.jpeg/会匹配类似xpng、1jpg这种包含这些字符但不是正确后缀的字符串，而不是仅匹配以.png/.jpg/.jpeg结尾的文件名。
• match()返回null时访问length报错：如果文件名不匹配任何后缀，match()会返回null，直接访问null.length会抛出JavaScript错误，导致ng-if的逻辑完全失效。

修复方案 #

方案1：基于原代码的调整（转义正则+空值判断）

我们先转义.，再用可选链操作符?.避免null报错：

<td ng-if="item.name.match(new RegExp(/\.png|\.jpg|\.jpeg/, 'gi'))?.length">
  <img ng-src="/uploads/{{item.name}}">
</td>
<td ng-if="!item.name.match(new RegExp(/\.png|\.jpg|\.jpeg/, 'gi'))?.length">
  No image
</td>

可选链?.的作用是：如果match()返回null，就不会继续访问length，直接返回undefined，在ng-if中会被判定为false。

方案2：更高效的test()方法推荐

其实我们不需要获取匹配结果数组，只需要判断是否匹配，用RegExp.test()更合适——它直接返回布尔值，逻辑更清晰，也更高效：

<td ng-if="new RegExp(/\.(png|jpg|jpeg)$/i).test(item.name)">
  <img ng-src="/uploads/{{item.name}}">
</td>
<td ng-if="!new RegExp(/\.(png|jpg|jpeg)$/i).test(item.name)">
  No image
</td>

这里还优化了正则：

• 用\.(png|jpg|jpeg)$把重复的\.提取出来，写法更简洁
• 加上$表示匹配字符串结尾，确保是文件名的后缀，避免误判类似image.png.txt的文件
• 去掉g标志，因为test()只需要一次匹配，全局标志在这里没有意义

内容的提问来源于stack exchange，提问作者tonymx227