Check for a regex string match in a javascript array

Question

I'm writing some client-side validation for our custom CMS. I need to check for any URL containing an image in a text area, and let the user know that they need to use https instead of http.

I've figured out how to search for any URL that starts with http:

$('#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;
    });

But this will also apply to any regular links that are included. If we could limit this to <img> tags it would be simpler, because I could just get the last three characters of the string and do an indexOf against an array of image suffixes.

We can't do that, though - an image URL could be included in a custom tag, it could be part of an alt parameter, it could be posted as a direct link, or any number of other things. Is there any way to test the regex against an array, or do I need to loop through the array and run a String.indexOf against each element separately?

Ideally, I'd do something like this:

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;
}

but I can't quite figure out what that regex would be.

Is val just html?

KevBot
– KevBot

2016-11-30 16:22:36 +00:00
Commented Nov 30, 2016 at 16:22 — KevBot
– KevBot, Commented Nov 30, 2016 at 16:22
@KevBot - yes, although some of it is custom tags.

EmmyS
– EmmyS

2016-11-30 16:23:10 +00:00
Commented Nov 30, 2016 at 16:23 — EmmyS
– EmmyS, Commented Nov 30, 2016 at 16:23
suffix regex: /\.(jpe?g|png|bmp|tiff|gif)/g;

nick
– nick

2016-11-30 16:27:24 +00:00
Commented Nov 30, 2016 at 16:27 — nick
– nick, Commented Nov 30, 2016 at 16:27

anubhava · Accepted Answer · 2016-11-30 17:29:45Z

4

You can build a regex using your image extensions:

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

Code Demo

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));

edited Nov 30, 2016 at 17:29

answered Nov 30, 2016 at 16:27

anubhava

790k67 gold badges603 silver badges671 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Eun Over a year ago

.* is a bit aggresive use a url regex instead

EmmyS Over a year ago

Hm. That sounds like what I want, but I must be implementing it incorrectly. I'm updating the OP with what I did; please help!

EmmyS Over a year ago

It prints exactly what I showed in the OP as the text I typed into the textarea: all image urls must be secure this is not an image url: google.com this is <img src="http://www.google.com/test.jpg" />

EmmyS Over a year ago

(Sorry, can't figure out how to format multiple lines in a comment.)

EmmyS Over a year ago

That returns true for the URL you entered. It needs to return false - it contains an image suffix and doesn't start with https.

|

Collectives™ on Stack Overflow

Check for a regex string match in a javascript array

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related