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

我有一个服务器大小的图像流，您将“fileid”，宽度和高度传递给它，并将图像传输到客户端。我正在使用CKEditor，并希望添加jquery函数，在文本框中更改高度或宽度时更改它的url。用正则表达式替换文本框中的Url值

正如你在这里看到的PIC其特定的格式：

enter image description here

/内容/图像/ {数字}/{宽度}/{height}的其余部分是在字符串可选。

可以说，他们的文本框的ID是“txtwidth”和“txtheight”，你会如何添加jQuery的功能，它是替换URL文本框的宽度和高度，且仅当它相匹配的字符串开始/内容/图像/ {位}/{宽度}/{高度}？

在此先感谢

/拉塞

来源

2011-12-30 Lasse Edsvik

您可以通过使用正则表达式匹配字符串，并更换相应的零部件很容易做到这一点。正如你所提到的，你想用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/

来源

2011-12-30 11:12:06 Niklas

比我的更好的实现：考虑按键事件并使用两个输入的一个代码的好主意。 – CedX 2011-12-30 11:16:19

当我使用.live而不是.bind时，Worked很好:) tyvm :) – 2011-12-30 11:49:20

比方说， 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())); 
});

来源

2011-12-30 11:13:31 CedX

我要建议/（\ d +）/克

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

来源

2011-12-30 11:51:24 stackuser10210

我要提出一个类似的方法为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问题。大多数用户用于输入处理其输入的小部件，因为他们的本机应用程序是以这种方式工作的。此外，许多用户在输入数字时会看到他们的键盘（现在的数字越来越少）。

来源

2011-12-30 12:14:52 PPvG

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

回答

相关问题