JavaScript - How to detect any kinds of link

Question

I have this function to detect link:

function isValidUrl(urlString) {
    const pattern = new RegExp(
        '^([a-zA-Z]+:\\/\\/)?' + // protocol
        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
        '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
        '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
        '(\\#[-a-z\\d_]*)?$', // fragment locator
        'i'
    );
    return pattern.test(urlString);
}

It's working if the link is something like:

www.yahoo.com, http://www.google.com etc..

But if the link is :

let link1 = '//cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL299_811f730c-5ae0-4d8e-846f-a4b970fc7081.jpg?v=1571142461';

let link2 = 'https://cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL297_761368c2-ddd5-4b5e-ad21-95edc2aa35b8.jpg?v=1581525690;https://cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL299_811f730c-5ae0-4d8e-846f-a4b970fc7081.jpg?v=1581525690;https://cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL298_2116150c-2d8d-431a-a31a-7d337d540718.jpg?v=1581525690;https://cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL300_27a827fc-11bd-4404-8217-c5046522dec2.jpg?v=1581525690';

then I can see this isValidUrl is returning false.

How can I fix it?

Does this answer your question? [What is the best regular expression to check if a string is a valid URL?](https://stackoverflow.com/questions/161738/what-is-the-best-regular-expression-to-check-if-a-string-is-a-valid-url) — kelsny, Nov 10 '22 at 03:35
Link2 contains multiple url seperated by semicolon. You need to split and test every url. `link2.split(';').every(isValidUrl)`. Dos that work for u ? — Nishanth, Nov 10 '22 at 03:46
@Nishanth Oh Yes, You right. Can you tell me how can I fix the function for the first url? — Shibbir, Nov 10 '22 at 03:47
Your regex is assuming only "https://" can be missing not just "https:". — gre_gor, Nov 10 '22 at 03:52

score 0 · Answer 1 · answered Nov 10 '22 at 08:50

I have slightly modified you regex to match your requirement.

function isValidUrl(urlString) {
    const pattern = new RegExp(
        '^(([a-zA-Z]+:)?\/\/)?' + // protocol
        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
        '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
        '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
        '(\\#[-a-z\\d_]*)?$', // fragment locator
        'i'
    );
    return pattern.test(urlString);
}
let link1 = '//cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL299_811f730c-5ae0-4d8e-846f-a4b970fc7081.jpg?v=1571142461';

let link2 = 'https://cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL297_761368c2-ddd5-4b5e-ad21-95edc2aa35b8.jpg?v=1581525690;https://cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL299_811f730c-5ae0-4d8e-846f-a4b970fc7081.jpg?v=1581525690;https://cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL298_2116150c-2d8d-431a-a31a-7d337d540718.jpg?v=1581525690;https://cdn.shopify.com/s/files/1/0033/3837/1190/products/SPL300_27a827fc-11bd-4404-8217-c5046522dec2.jpg?v=1581525690';

console.log(isValidUrl(link1))
console.log(link2.split(';').every(isValidUrl))

JavaScript - How to detect any kinds of link

1 Answers1