javascript - 将文本框中的 URL 值替换为正则表达式

Question

我有一个服务器大小的图像流，您可以在其中传递“fileid”、宽度和高度，并将图像流式传输到客户端。我正在使用 CKEditor，并且想添加 jquery 函数，当文本框中的高度或宽度发生变化时，该函数会更改其 url。

正如您在图片中看到的，它是一种特定的格式:

/Content/Image/{digit}/{width}/{height} 字符串中的其余部分是可选的。

假设文本框的 id 是“txtwidth”和“txtheight”，您如何向其中添加 jquery 功能来替换 url 文本框中的宽度和高度，并且仅当它与以/Content/Image/{digit 开头的字符串匹配时}/{宽度}/{高度}？

提前致谢

/莱塞

Answer 1

您可以通过使用正则表达式来匹配字符串并替换相应的部分来轻松完成此操作。正如您提到的，您希望使用 jQuery 来完成此操作，我假设您的网站上已经有 jQuery，但如果您没有，我不建议为此添加它。

我没有进一步解释要做什么，而是粘贴了下面的代码并注释了每个步骤，这应该可以清楚地表明发生了什么:

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

});

示例:http://jsfiddle.net/niklasvh/wsAcq/