使用正则表达式替换文本框中的URL值

Question

我有一个服务器大小的图像流，你传递＆＃34; fileid＆＃34;，宽度和高度，它将图像流传输到客户端。我正在使用CKEditor，并希望添加jquery函数，当文本框中的高度或宽度发生变化时，它会更改它的URL。

正如你在图片上看到的那样，它是一种特定的格式：

/ Content / Image / {digit} / {width} / {height} rest在字符串中是可选的。

让我们说他们的文本框是＆＃34; txtwidth＆＃34;和＆＃34; txtheight＆＃34;，如何添加jquery功能来替换url文本框中的宽度和高度，并且只有匹配以/ Content / Image / {digit} / {width} / {height开头的字符串}？

提前致谢

/拉塞

Answer 1

您可以使用regexp匹配字符串并替换相应的部分，从而轻松完成此操作。正如你提到的那样你想用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/

Answer 2

假设URL字段的HTML标识为“fileUrl”。与其值等效的正则表达式为：

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

这是一个快速提案（未经过测试，未经过优化）：

$("#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()));
});

Answer 3

我打算建议/（\ 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/

Answer 4

我打算提出一种与Niklas' answer类似的方法（在我被一些重要的事情或可能是一只松鼠打断之前）。所以请继续（和我+1）。

但有几点：

• 验证width和height字段的内容。或者至少使用parseInt。否则，如果用户输入非数字字符，则正则表达式将停止匹配...
• 匹配[0-9]*而不是[0-9]+。如果用户将字段留空，后者将破坏正则表达式。当然，做val = parseInt(...) || 0也会解决它。

换句话说，我做这样的事情：

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

另外，如果路径（/Content/Image/）将来可能会发生变化，您可以使用这个更通用的正则表达式：/^\/(.+)\/([0-9]*)\/[0-9]*\/[0-9]*\//并让替换字符串以/$1/$2/开头。 （见this JSFiddle。）

最后，我不会绑定到keypress。除了某些浏览器中可能存在的副作用（例如change事件未被处理）之外，还存在UX问题。大多数用户习惯于在blur上输入处理其输入的小部件，因为他们的原生应用程序以这种方式工作。此外，许多用户在键入数字时都会看键盘（现在这些日子很少见。）