用正則表達式替換文本框中的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值

回答

相關問題