javascript - 检查 javascript 数组中的正则表达式字符串匹配

Question

我正在为我们的自定义 CMS 编写一些客户端验证。我需要检查文本区域中包含图像的任何 URL，并让用户知道他们需要使用 https 而不是 http。

我已经想出了如何搜索任何以 http: 开头的 URL

$('#template_form').submit(function() {
        val = $("#template_data").val();
        if (val.match(/http:\/\//)) {
            alert("You must set all complete image URLs to be https!");
            $("#logError").val("true");
            return false;
        }
        return true;
    });

但这也适用于包含的任何常规链接。如果我们可以将其限制为 <img> tags 它会更简单，因为我可以只获取字符串的最后三个字符并执行 indexOf针对一组图像后缀。

不过，我们不能那样做 - 图片 URL 可以包含在自定义标签中，它可以是 alt 的一部分参数，它可以作为直接链接或任何其他内容发布。有什么方法可以针对数组测试正则表达式，还是我需要遍历数组并运行 String.indexOf分别针对每个元素？

理想情况下，我会做这样的事情:

suffixes = [".jpg", ",jpeg", ".png", ".gif", ".tiff", ".bmp"];
if (val.match(/http:\/\//)) && suffixes.indexOf(**some kind of regex**) {
    alert("You must set all complete image URLs to be https!");
    $("#logError").val("true");
    return false;
}

但我不太明白那个正则表达式是什么。

Answer 1

您可以使用图像扩展构建正则表达式:

var suffixes = ["jpg", "jpeg", "png", "gif", "tiff", "bmp"];

var re = new RegExp('http://[^>\\s]+?\.(?:' + suffixes.join('|') + ')');

if (re.test(val)) {
    alert("You must set all complete image URLs to be https!");
    $("#logError").val("true");
    return false;
}

JSFiddle

代码演示

var val = '<img src="http://www.google.com/test.jpg" />';
var suffixes = ["jpg", "jpeg", "png", "gif", "tiff", "bmp"];
var re = new RegExp('http://[^>\\s]+?\.(?:' + suffixes.join('|') + ')');

console.log(re.test(val));