JSFiddle - React, Tailwind, and code Playground

by niklasvh

HTML

<input type="text" value="/Content/Image/15/151/432/Lighthouse.jpg" id="url" style="width:300px;" />
<br />
<input type="text" id="txtwidth" value="1024" />
<input type="text" id="txtheight" value="768" />

JavaScript

// bind onchange and keypress events to the width and height text boxes
$('#txtwidth, #txtheight').bind('change keypress', function(){
    
    // define the regexp to which to test with, edit as needed
    var re = /\/Content\/Image\/([0-9]+)\/[0-9]+\/[0-9]+\//,
        // store url and its value to a variable so we won't have to retrieve it multiple times
        url = $('#url'),
        val = url.val();
    
    // test if regexp matches the url
    if (!re.test(val)) {
        // doesn't match
         return;    
    }
    
    // we got this far, so it did match
    
    // replace the variables in the regexo
    val = val.replace(re, "/Content/Image/$1/" + $("#txtwidth").val() + "/" + $("#txtheight").val() + "/");
    
    // put it back into the input field
    url.val(val);
    
});