JSFiddle - React, Tailwind, and code Playground

by Gary Guagliardo

HTML

<h3 style="color: red;">Using existing regex [ /\..+$/ ]:</h3>
<ul id="existingRegex"></ul>

<h3 style="color: green;">Using updated regex [ /\.\w+$/ ]:</h3>
<ul id="newRegex"></ul>

JavaScript

var _blobType = "image/jpeg",
    _fileNames = [
        "OneDot.png",
        "Two.Dots.png",
        "Three.Dots.123.bmp"
    ],
    _displayResult = function (fileName, regex) {
        var newName = fileName.replace(
                regex, 
                '.' + _blobType.substr(6)
            ),    
            li = document.createElement("li");
        li.innerHTML = "Old name: " + fileName + "<br/>New name: <b>" + newName + "</b>";
        return li;
    };

_fileNames.forEach(function (fileName) {
    var li = _displayResult(fileName, /\..+$/)
    document.getElementById("existingRegex").appendChild(li);
});

_fileNames.forEach(function (fileName) {
    var li = _displayResult(fileName, /\.\w+$/)
    document.getElementById("newRegex").appendChild(li);
});