CODEWITHSUNDEEP
javascriptjqueryregex
Lasse Edsvik
Lasse Edsvik

Reputation: 9298

Replace Url value in textbox with regexp

I have a server size image stream where you pass "fileid", width and height to and it streams an image to client. I'm using CKEditor, and would like to add jquery function that changes it's url when height or width changes in the textboxes.

As you see here on the pic its a specific format:

enter image description here

/Content/Image/{digit}/{width}/{height} rest is optional in string.

Lets say id's of them textboxes are "txtwidth" and "txtheight", how would you add jquery functionality to it that replaces width and height in url textbox, and only if it matches string starting with /Content/Image/{digit}/{width}/{height}?

Thanks in advance

/Lasse

Upvotes: 0

Views: 474

Answers (4)

Peter-Paul van Gemerden
Peter-Paul van Gemerden

Reputation: 7011

I was going to suggest a similar approach as Niklas' answer (before I was interrupted by something important, or possibly a squirrel). So go with that (and +1 from me).

A couple of points, though:

  • Validate the contents of the width and height fields. Or at least use parseInt. Otherwise, if the user enters a non-digit character, the regular expression will stop matching...
  • Match on [0-9]* instead of [0-9]+. The latter would break the regex if the user left a field empty. Of course, doing val = parseInt(...) || 0 would fix it as well.

In other words, I'd do something like this:

JSFiddle: http://jsfiddle.net/PPvG/j8dT9/

var re = /\/Content\/Image\/([0-9]*)\/[0-9]*\/[0-9]*\//,
    url = $('#url'),
    val = url.val(),
    width = parseInt($("#txtwidth").val(), 10) || 0,
    height = parseInt($("#txtheight").val(), 10) || 0;

if (re.test(val)) {
    val = val.replace(re, "/Content/Image/$1/" + width + "/" + height + "/");
    url.val(val);
}

Also, in case the path (/Content/Image/) might change in the future, you could use this more general regex: /^\/(.+)\/([0-9]*)\/[0-9]*\/[0-9]*\// and let the replacement string start with /$1/$2/. (See this JSFiddle.)

Finally, I wouldn't bind to keypress. Aside from possible side effects in some browsers (like the change event not being handled), there is a UX concern. Most users are used to input widgets handling their input on blur, because their native apps work that way. Besides, many users look at their keyboard when typing numbers (numpads are getting rare, these days).

Upvotes: 1

stackuser10210
stackuser10210

Reputation: 352

i was going to suggest /(\d+)/g

<div id="replace_this">/Content/Image/56/1024/768</div>

var newWidth = 2048;
var newHeight = 384;
var matches = $('#replace_this').html().match(/(\d+)/g);
newHTML = $('#replace_this').html().replace(matches[1], newWidth);
newHTML = newHTML.replace(matches[2], newHeight);
$('#replace_this').html(newHTML);

http://jsfiddle.net/qpmuT/

Upvotes: 1

CedX
CedX

Reputation: 3987

Let's say that the URL field has the HTML id "fileUrl". The regular expression equivalent to its value is:

/^\/Content\/Image\/(\d+)\/(\d+)\/(\d+)/

Here is a quick proposal (not tested and not optimized at all):

$("#txtwidth").change(function()
{
   var value=$("#fileUrl").val();
   $("#fileUrl").val(value.replace(/^\/Content\/Image\/(\d+)\/(\d+)\/(\d+)/, "/Content/Image/$1/"+$("#txtwidth").val()+"/$3"));
});

$("#txtheight").change(function()
{
   var value=$("#fileUrl").val();
   $("#fileUrl").val(value.replace(/^\/Content\/Image\/(\d+)\/(\d+)\/(\d+)/, "/Content/Image/$1/$2/"+$("#txtheight").val()));
});

Upvotes: 2

Niklas
Niklas

Reputation: 30012

You can do this easily by using regexp to match the string and to replace the corresponding parts. As you mentioned that you'd want to do this with jQuery I am assuming you have jQuery already on your site, but if you don't I wouldn't recommend adding it for this.

Instead of explaining further what to do, I've pasted the code below and commented each step, which should make it quite clear what's going on:

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

});

example: http://jsfiddle.net/niklasvh/wsAcq/

Upvotes: 3

Related Questions