檢查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>標記，則會更簡單，因為我可以獲取字符串的最后三個字符，並對圖像后綴數組執行indexOf 。

不過，我們無法做到這一點-圖片網址可能會包含在自定義標記中，它可能是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));