JSFiddle - React, Tailwind, and code Playground

by Gary Guagliardo

HTML

<h1>Detecting Data URLs</h1>
Uses a regex to determine if a string looks like a data URL. Read the <a href="https://gist.github.com/bgrins/6194623">source code and more information</a>.
<hr />
<input id="input" placeholder="enter a data URL" />
<strong></strong>

CSS

strong {
    display: block;
    padding: 3px;
}
input {
    width: 50%;
    min-width: 200px;
}

JavaScript

// Detecting data URLs
// data URI - MDN https://developer.mozilla.org/en-US/docs/data_URIs
// The "data" URL scheme: http://tools.ietf.org/html/rfc2397
// Valid URL Characters: http://tools.ietf.org/html/rfc2396#section2

function isDataURL(s) {
    return !!s.match(isDataURL.regex);
}
isDataURL.regex = /^\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i;


var yes = [
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC",
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAAFVBMVEXk5OTn5+ft7e319fX29vb5+fn///++GUmVAAAALUlEQVQIHWNICnYLZnALTgpmMGYIFWYIZTA2ZFAzTTFlSDFVMwVyQhmAwsYMAKDaBy0axX/iAAAAAElFTkSuQmCC",
    "   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAAFVBMVEXk5OTn5+ft7e319fX29vb5+fn///++GUmVAAAALUlEQVQIHWNICnYLZnALTgpmMGYIFWYIZTA2ZFAzTTFlSDFVMwVyQhmAwsYMAKDaBy0axX/iAAAAAElFTkSuQmCC   ",
    " data:,Hello%2C%20World!",
    " data:,Hello World!",
    " data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D",
    " data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E",
    "data:,A%20brief%20note",
    "data:text/html;charset=US-ASCII,%3Ch1%3EHello!%3C%2Fh1%3E",
    "data:video/x-ms-wmv;base64,SUQzAwAAAAAKB1RBTEIAAAAPAAA",
    "data:audio/mp3;base64,SUQzAwAAAAAKB1RBTEIAAAAPAAA"];

var no = [
    "dataxbase64",
    "data:HelloWorld",
    "data:text/html;charset=,%3Ch1%3EHello!%3C%2Fh1%3E",
    "data:text/html;charset,%3Ch1%3EHello!%3C%2Fh1%3E", "data:base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC",
    "",
    "http://wikipedia.org",
    "base64",
   ...